Angular 5：显示mat-sidenav时禁止背景内容滚动

这个问题我之前在Angular项目里也碰到过，核心就是要在侧边栏展开时锁定页面背景的滚动，收起时恢复正常。给你几个实用且易上手的解决方案：

方案一：通过CSS类动态控制body滚动 #

这是最直接的实现方式，利用mat-sidenav的状态变化事件，给body添加/移除禁止滚动的类：

1. 先在全局样式文件（比如styles.css）中定义禁止滚动的类：

.no-scroll {
  overflow: hidden;
  position: fixed;
  width: 100%;
}

这里加position: fixed是为了避免单纯设置overflow: hidden导致页面突然跳回顶部的问题，width: 100%保证body宽度不会异常收缩。

2. 修改组件模板，绑定sidenav的状态变化事件：

<mat-sidenav #sidenav (openedChange)="handleSidenavState($event)">
  <!-- 你的侧边栏内容 -->
</mat-sidenav>

3. 在组件TS文件中实现事件处理逻辑：

handleSidenavState(isOpened: boolean) {
  if (isOpened) {
    document.body.classList.add('no-scroll');
  } else {
    document.body.classList.remove('no-scroll');
  }
}

方案二：用Angular CDK的滚动策略（更优雅） #

如果你的项目已经引入了Angular CDK，推荐用官方提供的滚动锁定方案，这是Material组件生态的最佳实践：

1. 在组件中注入并配置滚动策略：

import { Overlay } from '@angular/cdk/overlay';
import { ScrollStrategy } from '@angular/cdk/overlay';

constructor(private overlay: Overlay) {}

scrollLockStrategy: ScrollStrategy;

ngOnInit() {
  // 创建一个锁定全局滚动的策略
  this.scrollLockStrategy = this.overlay.scrollStrategies.block();
}

2. 将策略绑定到sidenav组件上：

<mat-sidenav #sidenav [scrollStrategy]="scrollLockStrategy">
  <!-- 你的侧边栏内容 -->
</mat-sidenav>

这种方法不需要手动操作DOM，完全符合Angular的组件化思想，还能自动处理滚动锁定的细节问题。

方案三：直接在toggle事件中处理 #

如果你的侧边栏是通过按钮手动切换的，也可以直接在toggle逻辑里控制body的滚动状态：

toggleSidenav() {
  this.sidenav.toggle().then(() => {
    document.body.classList.toggle('no-scroll', this.sidenav.opened);
  });
}

这种写法更简洁，适合简单场景。

你之前尝试position相关CSS没解决，大概率是只给容器设置了样式，但页面的滚动是由body/html元素触发的，必须针对它们设置才能生效哦。

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