Событие прокрутки HostListener не запускается, но событие mouseenter работает нормально

Question

У меня есть простой Stackblitz с пользовательским компонентом («ImagePicker»). Для этого компонента установлено свойство переполнения, поэтому содержимое вызывает его прокрутку.

Я использую @HostListener, чтобы попытаться перехватить событие scroll, но по какой-то причине оно не работает. Я также создал событие mouseenter, и оно действительно работает просто отлично.

Почему не работает прокрутка?

https://stackblitz.com/edit/imagepicker

Answer 1

Для того, чтобы заставить событие прокрутки работать, пакет hostBinding и событие упоминаются неправильно. Пожалуйста, следуйте этому коду

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



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

Выберите правильный hostlistener и имя события, чтобы он работал.

Answer 2

Можно ожидать, что событие прокрутки всплывет, но это происходит только при прокрутке document. Это означает, что вы можете захватывать события прокрутки на объекте window, когда прокручивается document.

Любые другие события прокрутки не всплывают и должны обрабатываться на самом элементе прокрутки. В вашем случае, как сказал @ AliF50, вы должны поместить слушателя в div внутри средства выбора изображений:

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

Причина этого состоит в том, чтобы избежать проблем с производительностью, потому что события прокрутки могут срабатывать при высокой ставка. Например, при использовании плавной прокрутки.

Из W3 spe c

Для каждой цели объекта в целевых событиях ожидающей прокрутки документа в том порядке, в котором они были добавлены в список, запустите эти подэтапы:

Если целью является Документ, запустите событие с именем scroll, которое всплывет в цель.

В противном случае запустите событие с именем scroll в цели.