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

问题描述

我希望能够在按下按钮时滚动到目标。

 < button（click）=scroll（#target）>按钮< /按钮> 
  

并且在我的component.ts中有一个方法。

  scroll（元素）{
 window.scrollTo（element.yPosition）
} 
  

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

你可以这样做：

 < button（click）=scroll（target）>< / button> 
< div＃target>您的目标< / div> 
  

然后在您的组件中：

  scroll（el）{
 el.scrollIntoView（）; 
} 
  

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>

And in my component.ts a method like.

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

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

解决方案

You could do it like this:

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

and then in your component:

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

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