mat-drawer-container内OnScroll事件无法触发问题排查

问题根源：mat-drawer-container的滚动区域是其内部专属容器（而非全局window），所以window.onscroll无法捕获它的滚动行为。以下是几种可行的解决方案：

方法一：模板直接绑定scroll事件 #

在mat-drawer-container标签上直接绑定scroll事件，触发组件内的处理方法：

模板代码 #

<mat-drawer-container (scroll)="handleDrawerScroll($event)">
  <!-- 你的大量内容 -->
</mat-drawer-container>

组件代码 #

handleDrawerScroll(event: Event): void {
  // 获取滚动位置
  const scrollPosition = (event.target as HTMLElement).scrollTop;
  // 执行你的滚动逻辑，比如加载更多、显示回到顶部按钮等
  console.log('当前滚动位置：', scrollPosition);
}

方法二：通过ViewChild获取容器元素监听 #

如果需要在代码中动态添加监听（比如条件触发），可以用ViewChild获取容器实例后绑定事件：

模板代码 #

<mat-drawer-container #drawerContainer>
  <!-- 你的大量内容 -->
</mat-drawer-container>

组件代码 #

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

export class YourComponent implements AfterViewInit {
  @ViewChild('drawerContainer') private drawerContainer!: ElementRef<HTMLElement>;

  ngAfterViewInit(): void {
    this.drawerContainer.nativeElement.addEventListener('scroll', (event) => {
      const scrollTop = (event.target as HTMLElement).scrollTop;
      console.log('滚动位置：', scrollTop);
      // 这里写你的滚动处理逻辑
    });
  }
}

特殊情况：监听内部内容容器的滚动 #

部分场景下，实际滚动的是mat-drawer-container内部的.mat-drawer-content元素，此时可以直接监听这个子元素：

模板代码 #

<mat-drawer-container>
  <mat-drawer-content #drawerContent>
    <!-- 你的大量内容 -->
  </mat-drawer-content>
</mat-drawer-container>

组件代码 #

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

export class YourComponent implements AfterViewInit {
  @ViewChild('drawerContent') private drawerContent!: ElementRef<HTMLElement>;

  ngAfterViewInit(): void {
    this.drawerContent.nativeElement.addEventListener('scroll', (event) => {
      // 处理滚动逻辑
    });
  }
}

内容的提问来源于stack exchange，提问作者Dovi Rosner