Angular 5中如何检测mat-sidenav-container内的滚动事件？

嘿，我之前也踩过这个坑！你推测的原因完全正确——当把包含router-outlet的div放到mat-sidenav-container内部后，滚动的主体已经不是浏览器窗口了，而是mat-sidenav-container里的mat-sidenav-content元素，所以监听window的滚动事件自然没反应。下面给你几个实用的解决办法：

方法1：直接在模板绑定mat-sidenav-content的scroll事件 #

这是最直接的方式，把滚动事件绑定到mat-sidenav-content上就行：

在navbar.component.html里修改结构：

<mat-sidenav-container>
  <mat-sidenav mode="side" opened>你的侧边栏内容</mat-sidenav>
  <!-- 把scroll事件绑定到mat-sidenav-content上 -->
  <mat-sidenav-content (scroll)="handleScroll($event)">
    <div>
      <router-outlet></router-outlet>
    </div>
  </mat-sidenav-content>
</mat-sidenav-container>

然后在对应的组件（比如home.component.ts或者父组件）里实现事件处理方法：

handleScroll(event: Event) {
  console.log("滚动事件触发啦！", event);
  // 在这里写你的滚动逻辑，比如导航栏样式变化、加载更多内容等
}

方法2：用ViewChild获取元素并监听滚动 #

如果不想在模板里直接绑定事件，可以通过Angular的ViewChild获取mat-sidenav-content实例，再手动监听滚动：

在组件类（比如navbar.component.ts）里：

import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { MatSidenavContent } from '@angular/material/sidenav';

@Component({
  selector: 'app-navbar',
  templateUrl: './navbar.component.html',
  styleUrls: ['./navbar.component.css']
})
export class NavbarComponent implements AfterViewInit {
  @ViewChild(MatSidenavContent) sidenavContent!: MatSidenavContent;

  ngAfterViewInit() {
    // 使用Material提供的elementScrolled()方法监听滚动
    this.sidenavContent.elementScrolled().subscribe(event => {
      console.log("滚动事件触发", event);
      // 执行你的滚动相关逻辑
    });
  }
}

方法3：检查CSS样式配置 #

有时候滚动事件失效是因为容器的高度或overflow属性设置不对，确保mat-sidenav-container占满视口高度，这样内部才会出现滚动条：

mat-sidenav-container {
  height: 100vh; /* 让容器铺满整个视口高度 */
}

注意点 #

之前你尝试的$(window).scroll()这类监听窗口滚动的方法肯定无效，因为现在滚动的是mat-sidenav-content这个容器元素，不是浏览器窗口本身，必须把监听对象切换到这个内部容器才行。

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