Angular 4 @HostListener窗口滚动事件奇怪的不适用于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中没有问题）：

  public isScrolled = false; 
构造函数（@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; 
 
 
 $ / code $ / pre 
 
 
任何帮助非常感谢。
解决方案
我确实遇到过相同的问题，并使用 window.scrollY 比使用 this.document.body.scrollTop 使其在Mozila Firefox中工作。我知道这是奇怪的，但它的工作。
 
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.
解决方案
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窗口滚动事件奇怪的不适用于Firefox的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！