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 的 1608 以上时停止触发？

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

Answer 1

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

我被难住了。