Angular 4 @HostListener Window scroll event strangely does not work in Firefox

Question

I'm using @HostListener('window:scroll', []) in Angular 4 app in order to add additional class to the header on scrolling. It works fine in Chrome but I noticed that in Firefox 54.0 (I think it's the last current version) the class is not added, it does not execute onWindowScroll() method at all. What can be the reason?

Here is a part of the 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 would be much appreciated.

Answer 1

try this:

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

I prefer this:

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