跟踪窗口滚动条的angular 5指令

Question

我想创建一个指令来侦听窗口滚动，并在接近页面顶部或底部时触发一个事件。我希望任何DOM元素都能够响应这些事件，以防万一。我可以用@HostListener("window:scroll", ["$event"])编写这样的指令，但是应该放在哪个DOM元素上？谢谢。

Answer 1

您可以通过这种方式读取窗口的当前滚动偏移量。在我的示例中，我只是在滚动至少150px之后设置了一个布尔值。

ngAfterViewInit(): void {
  const scroll$ = fromEvent(window, 'scroll').pipe(
    throttleTime(10),
    map(() => window.pageYOffset),
  );

  scroll$.subscribe((value) => this.contentScrolled = (value > 150));
}

您可以在指令中订阅此窗口事件。