如何检测用户何时停止滚动 - Angular 5

Question

当用户滚动页面时，我试图隐藏一个div，当停止滚动时，我想显示div。

我正在使用@HostListener但它只触发了用户滚动页面。

  @HostListener('window:scroll', ['$event']) 
  onScroll(event) {
    this.scroll = true;
    setTimeout(() => {
      this.scroll = false;
    }, 2000);
  }

Answer 1

若要改进当前代码，请在检测到scroll事件时调用clearTimeout。它将阻止div 显示，直到您停止滚动指定的时间量。

public scroll = false;
private timeout: number;
@HostListener('window:scroll', ['$event'])
onScroll(event) {
  this.scroll = true;
  clearTimeout(this.timeout);
  this.timeout = setTimeout(() => {
    this.scroll = false;
  }, 300);
}

请参阅此堆栈闪电战以获取演示。

Answer 2

您可以在此用例中使用 RxJs 的去抖动时间。

fromEvent(window, "scroll").pipe(
    tap(() => this.scroll = true),
    debounceTime(100)
).subscribe(() => {
    this.scroll = false;
});

堆栈闪电战示例：https://stackblitz.com/edit/angular-dumymv

Answer 3

你的方法有效。而这个堆栈闪电战证明了这一点：https://stackblitz.com/edit/angular-5xcm6h

您可能在其他地方遇到错误。