Angular 4 @HostListener Window 滚动事件奇怪地在 Firefox 中不起作用答案

【问题标题】：Angular 4 @HostListener Window scroll event strangely does not work in FirefoxAngular 4 @HostListener Window 滚动事件奇怪地在 Firefox 中不起作用
【发布时间】：2017-06-26 16:46:15
【问题描述】：

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

这是代码的一部分和Plunker Demo（顺便说一句，它在 Chrome 中也可以正常工作，但在 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;
    }
}

任何帮助将不胜感激。

【问题讨论】：

标签： angular firefox scroll

【解决方案1】：

试试这个：

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

我更喜欢这个：

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

【讨论】：

感谢您的建议。我两种都试过了——第一个在 Firefox 中没有任何区别，但第二个——带有 Observable 的那个使 onWindowScroll 事件被触发——“滚动..”记录在控制台中。但仍然没有将“滚动”类应用于标题。我必须阅读更多关于 Observables 的内容来思考解决这个问题的方法。

【解决方案2】：

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

【讨论】：

【解决方案3】：

我是如何解决这个问题的

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

概念：如果没有其他滚动元素，你可以先听一下现在为body的滚动元素的属性

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

    // Your Code Here

  }

【讨论】：

参数 'e' 隐含了一个 'any' 类型。
您可以随时定义它的类型 onWindowScroll(e:Event) 以供参考检查这里什么类型事件指的是developer.mozilla.org/en-US/docs/Web/API/Event
这应该是答案。
尝试没有成功。如果模板是根组件中的组件，我们是否必须像(scroll)="onWindowScroll($event)"一样绑定到最外层的div？
您需要将滚动事件附加到任何可滚动且适合您的目的的元素。如果您正在寻找 body 元素上的滚动，则在 body 上发生事件，否则在您要检测滚动的元素上。

【解决方案4】：

此 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>

【讨论】：

更新：RxJs 6+ stackoverflow.com/questions/50571550/…