如何进行滚动事件？

Question

我需要从溢出的div中获取滚动事件:在我的Angular 2应用程序中滚动.

似乎onscroll事件不适用于Angular 2.

我怎么能实现这一目标？

Answer 1

// @HostListener('scroll', ['$event']) // for scroll events of the current element
@HostListener('window:scroll', ['$event']) // for window scroll events
onScroll(event) {
  ...
}

要么

<div (scroll)="onScroll($event)"></div>

Answer 2

对于角4,工作溶液是在组件内部进行的

@HostListener('window:scroll', ['$event']) onScrollEvent($event){
  console.log($event);
  console.log("scrolling");
} 

Answer 3

你可以使用@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;
}

Answer 4

@HostListener我建议使用RxJS 中的fromEvent来替代和滚动元素上的输出，因为您可以将其与filter()和链接起来distinctUntilChanges()，并且可以轻松跳过大量潜在冗余事件（和更改检测）。

这是一个简单的例子：

// {static: true} can be omitted if you don't need this element/listener in ngOnInit
@ViewChild('elementId', {static: true}) el: ElementRef;

// ...

fromEvent(this.el.nativeElement, 'scroll')
  .pipe(
    // Is elementId scrolled for more than 50 from top?
    map((e: Event) => (e.srcElement as Element).scrollTop > 50),
    // Dispatch change only if result from map above is different from previous result
    distinctUntilChanged());

Answer 5

监听window:scroll窗口/文档级别滚动的scroll事件和元素级别滚动的元素事件.

窗口:滚动

@HostListener('window:scroll', ['$event'])
onWindowScroll($event) {

}

要么

<div (window:scroll)="onWindowScroll($event)">

滚动

@HostListener('scroll', ['$event'])
onElementScroll($event) {

}

要么

<div (scroll)="onElementScroll($event)">

@HostListener('scroll', ['$event']) 如果主机元素本身不可滚动,则无效.

例子

• 使用事件绑定
• 使用HostListener