角度4滚动事件

我在滚动事件处理中相当迷茫。角度4滚动事件

我想禁用滚动;当用户点击滚轮x次时，我希望页面向下滚动（通过一些动画）到某个元素。我能够添加HostListener，但我没有更进一步。

@HostListener('window:scroll', ['$event']) 
    public onScrollEvent(event) { 
}

但第一个问题是，event.preventDefault（）或event.stopPropagation（）不工作。我想是这样

event.target.scrollingElement.scrollTop = 0;

，当我的柜台打一定数量的通话

event.target.scrollingElement.scrollTop = 1080;

但是，这是一个烂摊子！ :)。

我也没有在角度官方网站上找到任何滚动手册。

您可以使用CSS样式本身来实现此目的。

body{ 
    overflow: hidden; 
}

2017-06-17 12:11:53 Aravind

然后onScrolEvent方法根本不会被调用。我在一个包裹在router-outlet中的组件中使用它 - 它会改变什么吗？ –

你的确切场景是什么？ – Aravind

我有APP组件，里面有top-menu组件和router-outlet。我的组件应该像我上面描述的那样工作。应该禁用滚动，并且当（例如）用户第三次击中滚轮时，它应该向下移动（向下滚动）某个元素（取得页面的整个高度） - 基本上就像幻灯片一样。干杯! –

在@HostListener装修事件的名称必须匹配传递给onScrollEvent方法的参数的名称。它必须是字面上相同，尝试：

@HostListener('window:scroll', ['$event']) 
public onScrollEvent($event){/*handler operations here...*/}

2017-06-18 17:21:25

回答