Angular多滚动条场景：获取特定滚动条及window:scroll事件异常问题

你当前用window:scroll事件只能捕获浏览器全局滚动，子组件里带滚动条的div属于局部滚动容器，它的滚动不会触发window的滚动事件。要实现监听和控制该滚动条，得直接操作这个div元素：

步骤1：在子组件模板中给滚动容器添加模板引用变量 #

给带有滚动条的div加上#scrollContainer标记，方便组件类获取DOM元素：

<div #scrollContainer class="scrollable-container">
  <!-- 子组件内容 -->
</div>

步骤2：在组件类中获取容器并监听滚动事件 #

用@ViewChild获取滚动容器元素，在组件初始化完成后绑定scroll事件，同时可以直接读取或修改scrollTop：

import { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core';

@Component({
  selector: 'app-your-child-component',
  templateUrl: './your-child-component.component.html',
  styleUrls: ['./your-child-component.component.css']
})
export class YourChildComponent implements AfterViewInit {
  // 获取滚动容器元素
  @ViewChild('scrollContainer') scrollContainer!: ElementRef<HTMLDivElement>;

  ngAfterViewInit(): void {
    const container = this.scrollContainer.nativeElement;
    // 绑定滚动事件
    container.addEventListener('scroll', () => {
      // 获取当前scrollTop值
      console.log('子组件滚动条scrollTop:', container.scrollTop);
    });
  }

  // 自定义方法：设置scrollTop值
  setScrollTop(value: number): void {
    if (this.scrollContainer) {
      this.scrollContainer.nativeElement.scrollTop = value;
    }
  }
}

替代方案：用@HostListener监听元素滚动（如果组件本身就是滚动容器） #

如果子组件的宿主元素（即组件根元素）就是那个带滚动条的div，可以直接用@HostListener监听元素自身的scroll事件：

@HostListener('scroll', ['$event']) onContainerScroll(event: Event) {
  const container = event.target as HTMLDivElement;
  console.log('scrollTop:', container.scrollTop);
}

这样就能精准捕获子组件滚动条的滚动事件，同时自由读取和修改它的scrollTop值了。

内容的提问来源于stack exchange，提问作者Domagoj Hamzic