Html 当用户'；s停止滚动-角度5

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

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

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

---

你的方法有效。这次闪电战证明了这一点：

---

您可能在其他地方出错。

若要改进当前代码，请在检测到

滚动

事件时调用

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

请参阅以获取演示。

您可以将RxJs用于此用例

fromEvent（窗口，“滚动”）.pipe(
轻触（（）=>this.scroll=true），
去BounceTime（100）
).订阅（（）=>{
this.scroll=false；
});

---

Stackblitz示例：

您使用的是有时会阻止滚动事件的角度材质吗？不，这是projectExplain中有关滚动事件的第一件事。您的成功条件是“用户滚动时隐藏div，停止后显示”。这一条件已经满足。但是，如果您希望接近即时状态更改，请将超时设置为0毫秒而不是2000毫秒。是否尝试通过编程方式滚动？div有一个动画，可以将div从屏幕上滑下，乍一看效果很好，但是当我滚动到long或慢速滚动时，div会弹出。