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);
}

有关演示，请参见this stackblitz。

Answer 2

您可以在此用例中使用RxJs的debouncetime。

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

Stackblitz示例：https://stackblitz.com/edit/angular-dumymv

Answer 3

您的方法有效。这个Stackblitz证明了这一点：https://stackblitz.com/edit/angular-5xcm6h

您可能在其他地方有错误。

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

3 个答案: