Angular 4 @HostListener Window scroll event strangely not working in Firefox

Question

I use @HostListener('window:scroll', [])Angular 4 in an application to add an extra class to the title when scrolling. It works fine in Chrome, but I noticed that in Firefox 54.0 (I think this is the latest current version) the class is not added, it does not execute the onWindowScroll () method at all. What could be the reason?

Here is a piece of code and a Plunker demo (which, by the way, also works fine in Chrome, but not in 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;
    }
}

Any help is appreciated.

Answer 1

window.scrollY, this.document.body.scrollTop, Mozilla Firefox. , , .

Answer 2

:

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

:

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

Answer 3

Angular Chrome, 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();
  }
}

DIV:

<div scroll (scrollPosition)="scrollChanged($event)">...</div>

Answer 4

Firefox, Chrome

: , ,

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

    // Your Code Here

  }