Comment obtenir sur des événements de défilement?

J'ai besoin d'obtenir de défilement des événements à partir d'un div avec overflow: scroll dans mon Angulaire 2 app.

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

Comment pourrais-je y parvenir?

  • Assez souvent, vous pouvez appliquer des événements comme onclick, onsubmit etc. Dans angulaire de l'équivalent est généralement simplement en enlevant le " on " et l'ajout de () à partir de noms d'événements. e.g (clic), (soumettre), etc... 🙂
InformationsquelleAutor Natanael | 2016-12-23
  1. 66
    //@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)"
    • (scroll)="onScroll($event)" résolu mon problème. Savez-vous si il existe un équivalent de liaison à onresize d'un élément?
    • Non, navigateurs ne fournissons pas les événements pour redimensionner des éléments, uniquement pour la fenêtre de redimensionnement ('window:resize'). Vous pourriez mettre en œuvre ngDoCheck() des sondages et de la taille. Cela peut être coûteux si, par conséquent, si vous pouvez compter sur moins fréquents pour les bureaux de la taille à l'aide d'un tel événement serait plutôt préféré.
    • Pouvez-vous dire de l'événement de la direction de défilement qui se passe? C'est sans examinant et en comparant les div scrollY de la valeur à la précédente?
    • developer.mozilla.org/en-US/docs/Web/Events/scroll les listes de l'information fournie par l'événement, qui ne comprennent rien au sujet de la direction.
    • En outre, celui-ci est travaillé dans Angulaire 6 --> stackoverflow.com/a/42547136/621951
    • celui-ci est à écouter pour faire défiler evens à partir d'un élément, celui que vous avez lié est pour des événements de défilement de la page/fenêtre.
    • Grinko vous n'avez pas toujours envie de défilement de la fenêtre événements. Souvent, vous voulez faire défiler les événements du composant en cours. Par exemple, si vous construisez une liste déroulante ou un composant de tableau.

    InformationsquelleAutor Günter Zöchbauer
  2. 30

    angulaire 4, la solution de travail est à faire à l'intérieur du composant

    @HostListener('window:scroll', ['$event']) onScrollEvent($event){
  console.log($event);
  console.log("scrolling");
}
    • Bonjour, je viens d'utiliser votre code dans mon composant et enfin j'ai ajouté un (défilement)="onScrollEvent($event)" mais je ne fonctionne pas.
    • (scroll)="onScrollEvent($event)" ne fonctionne pas, mais mon code est actuellement en train de travailler sur angulaire de la version 4.0.0, Il déclenche l'événement scroll
    • cela fonctionne très bien, pas besoin d'ajouter (scroll)="onScrollEvent($event) dans le code HTML de avec ce.
    InformationsquelleAutor Thomas Webber
  3. 21

    Vous pouvez utiliser un @HostListener décorateur. Fonctionne avec Angulaire 4.

    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;
}
    InformationsquelleAutor Uliana Pavelko
  4. 8

    Écouter window:scroll événement pour la fenêtre/niveau du document de défilement et de l'élément de scroll événement de niveau d'élément de défilement.

    fenêtre:faites défiler

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

}

    ou

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

    de défilement

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

}

    ou

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

    @HostListener('scroll', ['$event']) ne fonctionnera pas si l'élément hôte lui-même n'est pas en mesure de défilement.

    Exemples

    InformationsquelleAutor kodebot