Angular 7 scroll event does not fire
Try this...No need to do anything with html.
import { Component, OnInit, HostListener } from '@angular/core';
@HostListener('window:scroll', ['$event']) getScrollHeight(event) {
console.log(window.pageYOffset, event);
}
The reason for this behaviour is that angular material blocks the scroll event.
I solved it like this:
ngAfterViewInit(): void {
const content = document.querySelector('.mat-dialog-container');
const scroll$ = fromEvent(content, 'scroll').pipe(map(() => content));
scroll$.subscribe(element => {
// do whatever
});
}
Here is an alternative solution which works rather well.
In short:
ngOnInit() {
// Add an event listener to window
// Window can be defined in the pollyfiles.ts as:
// if (window) {
// (window as any).global = window;
// }
window.addEventListener('scroll', this.scroll, true); //third parameter
}
ngOnDestroy() {
window.removeEventListener('scroll', this.scroll, true);
}
scroll = (event: any): void => {
// Here scroll is a variable holding the anonymous function
// this allows scroll to be assigned to the event during onInit
// and removed onDestroy
// To see what changed:
const number = event.srcElement.scrollTop;
console.log(event);
console.log('I am scrolling ' + number);
};