Как попасть на события прокрутки?

Мне нужно получить события прокрутки из div с переполнением: прокрутите в моем приложении Angular 2.

Кажется, событие onscroll не работает на Angular 2.

Как я мог достичь этого?

Ответ 1

@HostListener('scroll', ['$event'])
onScroll(event) {
  ...
}

или

<div (scroll)="onScroll($event)"

Ответ 2

для angular 4, рабочее решение должно было выполнить внутри компонента

@HostListener('window:scroll', ['$event']) onScrollEvent($event){
  console.log($event);
  console.log("scrolling");
} 

Ответ 3

См. API @HostListener https://angular.io/api/core/HostListener. Работает с Angular 4.3.6

@HostListener("window:scroll", []) onWindowScroll() {
// do some stuff here when the window is scrolled
 const verticalOffset = window.pageYOffset ||document.documentElement.scrollTop || document.body.scrollTop || 0;
}

Ответ 4

Слушайте событие window:scroll для прокрутки окна/документа и элемента scroll для прокрутки на уровне элемента.

Окно: прокручивать

@HostListener('window:scroll', ['$event'])
onWindowScroll($event) {

}

или

<div (window:scroll)="onWindowScroll($event)">

прокрутки

@HostListener('scroll', ['$event'])
onElementScroll($event) {

}

или

<div (scroll)="onElementScroll($event)">

@HostListener('scroll', ['$event']) не будет работать, если сам элемент хоста не имеет возможности прокрутки.

Примеры