Question

我在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;
    }
}

任何帮助将不胜感激。

Answer 1

试试这个：

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

我更喜欢这个：

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

Answer 2

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

Answer 3

此Angular指令适用于Chrome和Firefox：

  P = [2, 4] and Q = [4, -3, -4, 4].

    = |2 - 4| + | 2 - (-3) | + |2 - (-4) | + | 2 - 4 | + | 4 - 4 | + | 4 - (-3) | + 
       | 4 - (-4) | + | 4 - 4 | 

    = 2 + 5 + 6 + 2 + 0 + 7 + 8 + 0 
                   = 30

在DIV元素上使用该指令：

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();
  }
}

Answer 4

我如何解决此问题

在Firefox，Chrome和其他浏览器上完美运行

概念：如果您没有其他滚动元素，则可以暂时收听滚动体的属性

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

    // Your Code Here

  }

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

4 个答案: