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

javascript html typescript angular

2022-08-30 02:03:01

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

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

在我的一个方法像。component.ts

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

我知道上面的代码是无效的，只是为了展示我在想什么。我刚刚开始学习Angular 4，以前没有Angular的经验。我一直在寻找这样的东西，但所有的例子都在AngularJs中，这与Angular 4有很大不同。

答案 1

你可以这样做：

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

，然后在组件中：

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

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

答案 2

在角度 13 工作完美

断续器

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

在组件中

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