HostListener 'scroll' 事件未触发，但 'mouseenter' 事件正常

Question

我有一个带有自定义组件（“ImagePicker”）的简单 Stackblitz。该组件设置了溢出属性，因此内容会使其滚动。

我正在使用@HostListener 来尝试捕获scroll 事件，但由于某种原因它无法正常工作。我还创建了一个mouseenter 事件，这确实工作得很好。

为什么滚动不起作用？

https://stackblitz.com/edit/imagepicker

Answer 1

您会期望滚动事件会冒泡，但它仅在 document 滚动时才会出现。这意味着您可以在 document 滚动时捕获 window 对象上的滚动事件。

任何其他滚动事件都不会冒泡，应该在实际滚动的元素上处理。在您的情况下，正如@AliF50 所说，您必须将侦听器放在图像选择器内的 div 上：

<div class="imagepicker" (scroll)="onScroll()">

这样做的原因是为了避免性能问题，因为滚动事件可以高速触发。例如在使用平滑滚动时。

来自W3 spec

对于文档的待处理滚动事件目标中的每个项目目标，按照它们添加到列表中的顺序，运行以下子步骤：

如果目标是一个文档，则触发一个名为滚动的事件，该事件在目标处冒泡。

否则，在目标处触发一个名为滚动的事件。

Answer 2

为了使滚动事件起作用，hostBinding 包和事件提到错误。请遵循此代码

import { Component, HostListener, HostBinding } from "@angular/core";



  @HostListener("window:scroll", ["$event"])
  onScrollEvent($event) {
    console.log("blah");
    this.eventData = $event;
  }

选择正确的主机监听器和事件名称以使其工作。