@HostListener 不会触发 window:scroll 事件答案

【问题标题】：window:scroll event doesn't trigger with @HostListener@HostListener 不会触发 window:scroll 事件
【发布时间】：2021-12-07 01:55:37
【问题描述】：

我的组件中有这个@HostListener，它应该监听窗口对象上的滚动事件：

 export class MapComponent implements OnInit {
  @HostListener('window:scroll', ['$event'])
  onScroll(e) {
    console.log(e.target);
  } }

什么都没有发生。如果我将其更改为单击事件，它会按预期检测整个窗口上的事件：

    export class MapComponent implements OnInit {
  @HostListener('window:click', ['$event'])
  onScroll(e) {
    console.log(e.target);
  } }

我尝试直接在主 div 上设置滚动事件，或者在窗口上使用 eventListener，没有任何效果。

知道为什么吗？

【问题讨论】：

试试这个Observable.fromEvent(window, "scroll").subscribe(e => { console.log(e.target); });，对你有用吗？
如果页面/元素上没有发生滚动，则元素上的 window:scroll、document:scroll 甚至 scroll 不会触发。我想你想听的是来自使用鼠标滚轮的事件，不是吗？见related stackblitz
您是否在使用任何第三方组件？
@Askirkela 你可能是对的，我没有想到这一点。实际上，我正在滚动的元素是使用 Mapbox API 的地图，因此没有实际的页面滚动。鼠标滚动命令触发地图的放大/缩小。
@DevangPatel 是的，我认为问题在于我正在从 Mapbox API 显示地图并且它已经使用了滚动事件（但我不知道如何使用）。然后页面上没有实际的滚动。我应该尝试做的是获取鼠标滚轮事件本身，但我不知道该怎么做。

【解决方案1】：

通过获取mousewheel 事件而不是scroll 事件解决了问题。由于页面中没有实际滚动，因此从未触发滚动事件。

【讨论】：