Angular 4@HostListener窗口滚动事件奇怪地在Firefox中不起作用

我正在Angular 4应用程序中使用

@HostListener（'window:scroll'，[]）

，以便在滚动时向标题添加额外的类。它在Chrome中运行良好，但我注意到在Firefox 54.0（我认为这是最新版本）中没有添加该类，它根本不执行onWindowScroll（）方法。原因可能是什么？

下面是代码的一部分和（顺便说一句，在Chrome中也可以很好地工作，但在Mozilla中不行）：

public isscrowled=false；
构造函数（@Inject（DOCUMENT）private DOCUMENT:any）{}
@HostListener（'窗口：滚动'，[]））
onWindowScroll（）{
const number=this.document.body.scrollTop；
如果（数量>150）{
this.isscrowled=true；
}else if（this.isscrowled&&number<10）{
这个是crowled=false；
}
}

任何帮助都将不胜感激。

试试以下方法：

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

我喜欢这样：

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

---

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

这个角度指令在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();
  }
}

import{指令，输出，EventEmitter，HostListener，ElementRef，OnDestroy
}从“@angular/core”开始；
从'rxjs/Rx'导入{Observable}；
导入“rxjs/add/observable/fromEvent”；
@指示({
选择器：“[滚动]”
})
导出类ScrollEvent指令实现OnDestroy{
@Output（）scrollPosition:EventEmitter=新的EventEmitter
();
私有滚动事件$；
构造函数（专用el:ElementRef）{
this.scrollEvent$=Observable.fromEvent（this.el.nativeElement，
'滚动'）。订阅（（e:any）=>{
this.scrollPosition.emit（例如target.scrollTop）；
});
}
恩贡德斯特罗（）{
此.scrollEvent$.unsubscribe（）；
}
}

在DIV元素上使用指令：

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

。。。

我是如何解决这个问题的

在Firefox、chrome和其他浏览器上完美运行

概念：如果您没有任何其他滚动元素，您可以收听滚动元素的属性，该元素现在是body

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

    // Your Code Here

  }

---

谢谢你的建议。我尝试了两种方法——第一种方法在Firefox中没有任何区别，但是第二种方法——使用Observable的方法触发了onWindowScroll事件——“滚动…”记录在控制台中。但仍然不会将类“滚动”应用于标题。我必须阅读更多有关可观察对象的内容，以思考解决此问题的方法。更新：RxJs 6+参数“e”隐式具有“any”类型。您可以始终在WindowsCroll（e:Event）上定义它的类型以供参考检查此处事件指代的类型这应该是答案。尝试但未成功。如果模板是根组件中的一个组件，我们是否必须绑定到最外层的div上，如

（scroll）=“onWindowScroll（$event）”

？您需要将scroll事件附加到任何可滚动的元素上，并符合您的目的。如果您正在查找滚动体元素，则在要检测滚动体的元素上以其他方式显示滚动体事件。

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

    // Your Code Here

  }