在Angular 4中单击时滚动到元素

Question

我希望能够在按下按钮时滚动到目标.我在想这样的事情.

<button (click)="scroll(#target)">Button</button>

在我的component.ts中有一个类似的方法.

scroll(element) {
    window.scrollTo(element.yPosition)
}

我知道上面的代码无效,只是为了表明我的想法.我刚刚开始学习Angular 4而没有以前的Angular经验.我一直在寻找类似的东西,但所有的例子都在AngularJs中,与Angular 4不同

Answer 1

你可以这样做:

<button (click)="scroll(target)"></button>
<div #target>Your target</div>

然后在你的组件中:

scroll(el: HTMLElement) {
    el.scrollIntoView();
}

编辑:我看到评论声明由于元素未定义,这不再有效.我在Angular 7中创建了一个StackBlitz示例,它仍然有效.有人可以提供一个不起作用的例子吗？

Answer 2

这是我用角度4做的方式.

模板

<div class="col-xs-12 col-md-3">
  <h2>Categories</h2>
  <div class="cat-list-body">
    <div class="cat-item" *ngFor="let cat of web.menu | async">
      <label (click)="scroll('cat-'+cat.category_id)">{{cat.category_name}}</label>
    </div>
  </div>
</div>

将此函数添加到Component.

scroll(id) {
  console.log(`scrolling to ${id}`);
  let el = document.getElementById(id);
  el.scrollIntoView();
}

Answer 3

实际上有一种纯粹的javascript方法可以在不使用setTimeout或者使用requestAnimationFramejQuery的情况下完成此任务.

简而言之,在scrollView中找到要滚​​动到的元素,然后使用scrollIntoView.

el.scrollIntoView({behavior:"smooth"});

这是一个傻瓜.

Answer 4

乔恩有正确的答案,这适用于我的角度5和6项目.

如果我想点击以平滑地从导航栏滚动到页脚:

<button (click)="scrollTo('.footer')">ScrolltoFooter</button>
<footer class="footer">some code</footer>

scrollTo(className: string):void {
   const elementList = document.querySelectorAll('.' + className);
   const element = elementList[0] as HTMLElement;
   element.scrollIntoView({ behavior: 'smooth' });
}

因为我想从页脚回滚到页眉,我创建了一个这个函数所在的服务,并将其注入到导航栏和页脚组件中,并在需要时传入"页眉"或"页脚".只记得实际给组件声明使用的类名:

<app-footer class="footer"></app-footer>

Answer 5

在角度7完美的作品

的HTML

<button (click)="scroll(target)">Click to scroll</button>
<div #target>Your target</div>

在组件中

  scroll(el: HTMLElement) {
    el.scrollIntoView({behavior: 'smooth'});
  }

Answer 6

这个派对的时间已经很晚了,但是我已经为Angular 4+编写了一个插件.它涵盖了您可能遇到的其他问题,例如服务器端渲染.您还可以动画滚动到您的喜好.完全披露,我是作者.

NPM:@ nicky-lenaers/ngx-scroll-to

GitHub:@ nicky-lenaers/ngx-scroll-to

希望这可以帮助你!

Answer 7

您可以使用下面的代码块滚动到视图上的任何元素引用。请注意，目标(elementref id ) 可以位于任何有效的 html 标签上。

在视图上（html 文件）

<div id="target"> </div>
<button (click)="scroll()">Button</button>
 

  

在.ts文件上，

scroll() {
   document.querySelector('#target').scrollIntoView({ behavior: 'smooth', block: 'center' });
}

Answer 8

您可以通过使用对 angular DOM 元素的引用来实现这一点，如下所示：

这是stackblitz中的例子

组件模板：

<div class="other-content">
      Other content
      <button (click)="element.scrollIntoView({ behavior: 'smooth', block: 'center' })">
        Click to scroll
      </button>
    </div>
    <div id="content" #element>
      Some text to scroll
</div>

Answer 9

在Angular中执行此操作的另一种方法是：

标记：

<textarea #inputMessage></textarea>

添加ViewChild（）属性：

@ViewChild('inputMessage')
inputMessageRef: ElementRef;

使用scrollIntoView（）函数滚动到组件内部所需的任何位置：

this.inputMessageRef.nativeElement.scrollIntoView();

Answer 10

在角度，您可以使用ViewChild和ElementRef：给您的html元素一个参考

<div #myDiv > 

在组件内部：

import { ViewChild, ElementRef } from '@angular/core';
@ViewChild('myDiv') myDivRef: ElementRef;

您可以使用this.myDivRef.nativeElement进入您的元素