html - 如何检测用户何时停止滚动 - 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);
}

参见 this stackblitz用于演示。