在 Angular 4 中单击时滚动到元素 [英] Scroll to element on click in Angular 4

问题描述

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

I want to be able to scroll to a target when a button is pressed. I was thinking something like this.

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

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

And in my component.ts a method like.

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

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

I know that the code above is not valid but just to show what I was thinking. I've just started to learn Angular 4 with no previous experience of Angular. I've been searching around for something like this but all the examples are in AngularJs which differs alot to Angular 4

推荐答案

你可以这样做:

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

然后在您的组件中:

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

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

I see comments stating that this no longer works due to the element being undefined. I created a StackBlitz example in Angular 7 and it still works. Can someone please provide an example where it does not work?

这篇关于在 Angular 4 中单击时滚动到元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！