Angular: 如何查看所有元素的滚动事件？

Question

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

这与 window 滚动一起使用，但有时，滚动条会出现在其他元素上。所以，我想观看所有活动。

所以，我想喜欢下面的功能，但是，下面会出错。

@HostListener('*:scroll', ['$event'])

Answer 1

您可以使用 useCapture 参数 true 添加文档级滚动事件侦听器来捕获所有元素上的滚动事件。 (https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener)

不幸的是，Angular 中的 HostListener 仍然无法做到这一点。您必须使用 addEventListener.

注册和取消注册您的处理程序

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  scroll = (e) => console.log(`scrolled: ${e.target.id}`);

  ngOnInit() {
    document.addEventListener('scroll', this.scroll, true);
  }

  ngOnDestroy() {
    document.removeEventListener('scroll', this.scroll);
  }
}

https://stackblitz.com/edit/angular-ivy-ohsjwd?file=src/app/app.component.ts

Angular: 如何查看所有元素的滚动事件？

Angular: How I can watch scroll event of all elements?

javascript

event-handling

angular