Angular 4 @HostListener Window 滚动事件奇怪地在 Firefox 中不起作用 [英] Angular 4 @HostListener Window scroll event strangely does not work in Firefox

问题描述

我在 Angular 4 应用程序中使用 @HostListener('window:scroll', []) 以便在滚动时向标题添加额外的类.它在 Chrome 中运行良好，但我注意到在 Firefox 54.0(我认为它是最新的当前版本)中没有添加该类，它根本不执行 onWindowScroll() 方法.原因是什么?

这是代码的一部分和一个 Plunker Demo(顺便说一下，它也适用于 Chrome但不在 Mozilla 中):

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.

推荐答案

我确实遇到了同样的问题，并通过使用 window.scrollY 而不是使用 this.document.body 解决了它.scrollTop 使其在 Mozila Firefox 中工作.我知道这很奇怪，但它有效.

I did face the same issue and resolved it by using window.scrollY rather than using this.document.body.scrollTop to make it work in Mozila Firefox. I know it is strange but it works.

这篇关于Angular 4 @HostListener Window 滚动事件奇怪地在 Firefox 中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！