web-dev-qa-db-fra.com

Angular 4 @HostListener Window scroll event étrangement ne fonctionne pas dans Firefox

J'utilise @HostListener('window:scroll', []) dans Angular 4 app afin d'ajouter une classe supplémentaire à l'en-tête lors du défilement. Cela fonctionne très bien dans Chrome mais j'ai remarqué que dans Firefox 54.0 (je pense que c'est la dernière version actuelle) la classe n'est pas ajoutée, elle n'exécute pas du tout la méthode onWindowScroll (). Quelle peut être la raison?

Voici une partie du code et un Plunker Demo (qui, soit dit en passant, fonctionne également très bien dans Chrome mais pas dans Mozilla):

public isScrolled = false;
constructor(@Inject(DOCUMENT) private document: any) {}
@HostListener('window:scroll', [])
onWindowScroll() {
    const number = this.document.body.scrollTop;
    if (number > 150) {
        this.isScrolled = true;
    } else if (this.isScrolled && number < 10) {
        this.isScrolled = false;
    }
}


Toute aide serait très appréciée.

angularfirefoxscroll
6
Julsy

J'ai rencontré le même problème et je l'ai résolu en utilisant window.scrollY plutôt qu'en utilisant this.document.body.scrollTop pour le faire fonctionner dans Mozila Firefox. Je sais que c'est étrange mais ça marche.

10
Rishabh

essaye ça:

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

Je préfère ça:

this.eventSubscription = Observable.fromEvent(window, "scroll").subscribe(e => {
                this.onWindowScroll();
            });
12
Avi

Cette directive Angular fonctionnera dans les deux Chrome et Firefox:

import { Directive, Output, EventEmitter, HostListener, ElementRef, OnDestroy 
} from '@angular/core';
import { Observable } from 'rxjs/Rx';
import 'rxjs/add/observable/fromEvent';

@Directive({
  selector: '[scroll]'
})
export class ScrollEventDirective implements OnDestroy {
  @Output() scrollPosition: EventEmitter<number> = new EventEmitter<number>
  ();

  private scrollEvent$;

  constructor(private el: ElementRef) {
    this.scrollEvent$ = Observable.fromEvent(this.el.nativeElement, 
    'scroll').subscribe((e: any) => {
      this.scrollPosition.emit(e.target.scrollTop);
    });
  }

  ngOnDestroy() {
    this.scrollEvent$.unsubscribe();
  }
}

Utilisation de la directive sur un élément DIV:

<div scroll (scrollPosition)="scrollChanged($event)">...</div>
4
Thomas Skyttegaard Hansen

Comment j'ai résolu cela

Fonctionne parfaitement sur Firefox, chrome et autres navigateurs

Concept: Vous pouvez écouter les propriétés de l'élément scrolling qui est le corps pour l'instant si vous n'avez aucun autre élément scrolling

@HostListener('window:scroll', ['$event']) onWindowScroll(e) {
    console.log(e.target['scrollingElement'].scrollTop)

    // Your Code Here

  }
2
Nishant Singh