Angular 4的HostListener窗口：用户停止滚动后连续滚动

Question

我有一个HostListener，当用户滚动到某个位置时，它会监视滚动位置以应用Angular动画。当用户滚动时，附加到HostListener的方法将触发。当用户停止滚动时，该方法将停止触发，如console.log输出所示。但是，如果用户滚动超过1608的Y值（window.pageYOffset），则连接到HostListener的方法将持续触发，直到用户向上滚动到1608以上。

这是我的代码：

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

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

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

为什么连接到HostListener的方法在window.pageYOffset为1608之后不断触发，但是当用户在window.pageYOffset上面滚动时停止触发？

此问题仅发生在Chrome中。附加到HostListener的方法在Firefox中按预期工作。

Answer 1

我发现了实际问题。我有一个名为matchHeight的指令，它负责确保类似的UI元素具有相同的高度，以考虑所显示内容长度的差异。 matchHeight使用ngAfterViewChecked，它在每次更改检测后运行。 matchHeight以物理方式更改dom元素的高度。我无法弄清楚为什么在某个Y位置之后更改元素的物理高度会导致HostListener在完全不同的指令中无休止地触发。

我很难过。