How to handle window scroll event in Angular 4?

Question

It seems I can not capture the window scroll event. On several sites, I found code similar to this:

@HostListener("window:scroll", [])
onWindowScroll() {
  console.log("Scrolling!");
}

Excerpts often come from version 2. This does not seem to work (anymore?) In Angular 4.2.2. If I replaced "window: scroll" with "window: touchmove", for example, then the touchmove event handles perfectly.

Does anyone know what I am missing? Thank you very much!

Answer 1

, document , div . window, document. , document - stopPropagation, window.

, , addEventListener useCapture, true.

, DOM, . , , , , angular , addEventListener:

export class WindowScrollDirective {

    ngOnInit() {
        window.addEventListener('scroll', this.scroll, true); //third parameter
    }

    ngOnDestroy() {
        window.removeEventListener('scroll', this.scroll, true);
    }

    scroll = (): void => {
      //handle your scroll here
      //notice the 'odd' function assignment to a class field
      //this is used to be able to remove the event listener
    };

}

, ( IE Edge, ) addEventListener, .

passive. , , , , . , , . mozilla.org passiveSupported, . , , , event.preventDefault()

, , , . , (DoCheck , - async. ), , . , :

export class WindowScrollDirective {

    private eventOptions: boolean|{capture?: boolean, passive?: boolean};

    constructor(private ngZone: NgZone) {}

    ngOnInit() {            
        if (passiveSupported()) { //use the implementation on mozilla
            this._eventOptions = {
                capture: true,
                passive: true
            };
        } else {
            this.eventOptions = true;
        }
        this.ngZone.runOutsideAngular(() => {
            window.addEventListener('scroll', this.scroll, <any>this.eventOptions);
        });
    }

    ngOnDestroy() {
        window.removeEventListener('scroll', this.scroll, <any>this.eventOptions);
        //unfortunately the compiler doesn't know yet about this object, so cast to any
    }

    scroll = (): void => {
        if (somethingMajorHasHappenedTimeToTellAngular) {
           this.ngZone.run(() => {
               this.tellAngular();
           });
        }
    };   
}

Answer 2

. @PierreDuc , , @Robert , . , , , .

 ngOnInit() {
    window.addEventListener('scroll', this.scrollEvent, true);
  }

  ngOnDestroy() {
    window.removeEventListener('scroll', this.scrollEvent, true);
  }

  scrollEvent = (event: any): void => {
    const number = event.srcElement.scrollTop;
  }

Answer 3

Angular Material, :

import { ScrollDispatchModule } from '@angular/cdk/scrolling';

:

import { ScrollDispatcher } from '@angular/cdk/scrolling';

  constructor(private scrollDispatcher: ScrollDispatcher) {    
    this.scrollDispatcher.scrolled().subscribe(x => console.log('I am scrolling'));
  }

:

<div cdkScrollable>
  <div *ngFor="let one of manyToScrollThru">
    {{one}}
  </div>
</div>

: https://material.angular.io/cdk/scrolling/overview

Answer 4

, , useCapture true. useCapture true, .

.