Angular 4's HostListener's window:scroll fires continuously after user stops scrolling

Question

I have a HostListener that watches scroll position to apply an Angular animation once user scrolls to a certain position. As user scrolls, the method attached to HostListener fires. When user stops scrolling, then the method stops firing as evidenced by console.log output. However, if user scrolls past a Y value (window.pageYOffset) of 1608, the method attached to HostListener fires continuously until user scrolls back above 1608.

Here's my code:

@HostListener('window:scroll', ['$event'])
checkScroll(evt) 
{
    const scrollPosition = window.pageYOffset

    if (scrollPosition >= 750) {
        this.SiteNavigationState = 'dark'
    } 
    else 
    {
        this.SiteNavigationState = 'translucent'
    }

    console.log('checkScroll', scrollPosition);
}

Why does the method attached to HostListener continually fire after window.pageYOffset of 1608, yet stops firing when user scrolls above window.pageYOffset of 1608?

This problem only happens in Chrome. The method attached to HostListener works as expected in Firefox.

Answer 1

I found the actual issue. I have a directive called matchHeight which is responsible for making sure similar UI elements are the same height to take into account differences in length of content being displayed. matchHeight uses ngAfterViewChecked which runs after every change detection. matchHeight physically changes the height of dom elements. I cannot figure out though why changing the physical height of elements after a certain Y position causes HostListener in a completely different directive to fire endlessly.

I'm stumped.