Angulaire 4 @HostListener de défilement de la Fenêtre d'événement étrange qui ne fonctionne pas dans Firefox

Je suis en utilisant @HostListener('window:scroll', []) Angulaire 4 application, afin d'ajouter d'autres classe à l'en-tête de défilement. Il fonctionne très bien dans Chrome, mais j'ai remarqué que dans Firefox 54.0 (je pense que c'est la dernière version en cours) de la classe n'est pas ajouté, il ne les exécute pas onWindowScroll() la méthode à tous. Quelle peut être la raison?

Voici une partie du code et un Plunker Démo (qui soit dit en passant, fonctionne aussi très bien dans Chrome, mais pas sous 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 grandement appréciée.

OriginalL'auteur Julsy | 2017-06-26

  1. 8

    J'ai fait face au même problème et l'a résolu en utilisant fenêtre.scrollY plutôt que d'utiliser .document.corps.scrollTop pour le faire fonctionner dans Mozila Firefox. Je sais que c'est étrange, mais ça fonctionne.

    Merci!!!! Cette réponse est la bonne, j'en suis arrivé à la même conclusion il y a quelques temps et a résolu mon problème.

    OriginalL'auteur Rishabh

  2. 10

    essayez ceci:

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

    Je préfère ceci:

    this.eventSubscription = Observable.fromEvent(window, "scroll").subscribe(e => {
                this.onWindowScroll();
            });
    Merci pour vos suggestions. J'ai essayé les deux - le premier n'a fait aucune différence dans Firefox, le second, bien que l'un avec l'Observable a fait la onWindowScroll événement d'être licencié "Défilement.." est enregistré dans la console. Mais n'applique toujours pas la classe 'défilement' de l'en-tête. J'ai pour en savoir plus sur les phénomènes Observables à penser à un moyen de fixation.

    OriginalL'auteur Avi

  3. 4

    Ce Angulaire de la directive fonctionnent 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();
  }
}

    À l'aide de la directive relative à un élément DIV:

    <div scroll (scrollPosition)="scrollChanged($event)">...</div>
    Mise à jour: RxJs 6+ stackoverflow.com/questions/50571550/...

    OriginalL'auteur Thomas Skyttegaard Hansen

  4. 0

    Comment j'ai résolu ce problème

    Fonctionne parfaitement sur Firefox, chrome et les autres navigateurs

    Concept: Vous pouvez écouter les propriétés de défilement de l'élément de corps pour l'instant, si vous n'avez pas d'autres défilement de l'élément

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

    //Your Code Here

  }

    OriginalL'auteur Nishant Singh