web-dev-qa-db-fra.com

Comment participer aux événements de défilement?

J'ai besoin d'obtenir les événements de défilement d'un div avec débordement: faites défiler dans mon Angular 2 app.

Il semble que événement onscroll ne fonctionne pas sur Angular 2.

Comment pourrais-je atteindre cela?

htmlcssangulartypescriptscrollbar
26
Natanael
// @HostListener('scroll', ['$event']) // for scroll events of the current element
@HostListener('window:scroll', ['$event']) // for window scroll events
onScroll(event) {
  ...
}

ou

<div (scroll)="onScroll($event)"
73
Günter Zöchbauer

pour angular 4, la solution de travail consistait à faire à l'intérieur du composant

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

Vous pouvez utiliser un décorateur @HostListener. Fonctionne avec Angular 4 et plus.

import { HostListener } from '@angular/core';

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

Écoutez l’événement window:scroll Pour le défilement niveau fenêtre/document et l’événement scroll de l’élément pour le défilement niveau élément.

fenêtre: défilement

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

}

ou

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

scroll

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

}

ou

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

@HostListener('scroll', ['$event']) ne fonctionnera pas si l'élément Host lui-même n'est pas capable de défiler.

Exemples

10
kodebot