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

Question

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

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

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

Answer 1

要改进您当前的代码，请clearTimeout在scroll检测到事件时调用。它会阻止 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);
}

有关演示，请参阅此 stackblitz。