Html 如何获得滚动事件？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/41304968/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to get on scroll events?
提问by Natanael
I need to get scroll events from a div with overflow: scroll in my Angular 2 app.
我需要从带有溢出的 div 获取滚动事件：在我的 Angular 2 应用程序中滚动。
It seems onscroll eventdo not works on Angular 2.
似乎onscroll 事件在 Angular 2 上不起作用。
How could I achieve that?
我怎么能做到这一点？
回答by Günter Z?chbauer
// @HostListener('scroll', ['$event']) // for scroll events of the current element
@HostListener('window:scroll', ['$event']) // for window scroll events
onScroll(event) {
...
}
or
或者
<div (scroll)="onScroll($event)"></div>
回答by Thomas Webber
for angular 4, the working solution was to do inside the component
对于角度 4，工作解决方案是在组件内部进行
@HostListener('window:scroll', ['$event']) onScrollEvent($event){
console.log($event);
console.log("scrolling");
}
回答by Uliana Pavelko
You could use a @HostListener decorator. Works with Angular 4 and up.
您可以使用 @HostListener 装饰器。适用于 Angular 4 及更高版本。
import { HostListener } from '@angular/core';
@HostListener("window:scroll", []) onWindowScroll() {
// do some stuff here when the window is scrolled
const verticalOffset = window.pageYOffset
|| document.documentElement.scrollTop
|| document.body.scrollTop || 0;
}
回答by kodebot
Listen to window:scrollevent for window/document level scrolling and element's scrollevent for element level scrolling.
侦听window:scroll窗口/文档级滚动的scroll事件和元素级滚动的元素事件。
window:scroll
窗口：滚动
@HostListener('window:scroll', ['$event'])
onWindowScroll($event) {
}
or
或者
<div (window:scroll)="onWindowScroll($event)">
scroll
滚动
@HostListener('scroll', ['$event'])
onElementScroll($event) {
}
or
或者
<div (scroll)="onElementScroll($event)">
@HostListener('scroll', ['$event'])won't work if the host element itself is not scroll-able.
@HostListener('scroll', ['$event'])如果宿主元素本身不可滚动，则将不起作用。
