如何测试Angular中HostListener监听的window scroll事件？

以下是针对你这段滚动监听代码可能遇到的问题及对应解决方案：

1. 滚动事件未触发 #

如果组件嵌套在带有overflow: scroll的容器内（而非整个窗口滚动），window.scrollY不会产生变化，此时需要监听目标容器的滚动事件：

// 通过@ViewChild获取滚动容器元素
@ViewChild('scrollContainer') scrollContainer!: ElementRef;

ngAfterViewInit() {
  this.scrollContainer.nativeElement.addEventListener('scroll', (event: Event) => {
    const numb = this.scrollContainer.nativeElement.scrollTop;
    this.scrolled = numb >= 50;
  });
}

2. 变量更新后视图未刷新 #

窗口滚动事件属于Angular变更检测机制外的事件，可能导致this.scrolled更新后视图未同步。可手动触发变更检测：

import { ChangeDetectorRef } from '@angular/core';

constructor(private cdr: ChangeDetectorRef) {}

@HostListener('window:scroll', ['$event'])
onWindowScroll(event: Event) {
  const numb = window.scrollY;
  this.scrolled = numb >= 50;
  this.cdr.detectChanges(); // 手动触发变更检测同步视图
}

3. 简化逻辑并优化性能 #

你的条件判断可简化为一行代码，同时可借助RxJS的防抖操作减少滚动事件触发频率，避免性能损耗：

import { fromEvent, debounceTime } from 'rxjs';

ngOnInit() {
  fromEvent(window, 'scroll')
    .pipe(debounceTime(100)) // 100ms防抖，降低事件触发频次
    .subscribe(() => {
      this.scrolled = window.scrollY >= 50;
      this.cdr.detectChanges(); // 按需添加
    });
}

4. 排查滚动阻止样式 #

检查组件宿主元素或父元素是否设置了overflow: hidden等样式，导致窗口无法滚动，window.scrollY始终为0。

内容的提问来源于stack exchange，提问作者Thiago Alcarás