如何禁用鼠标滚动时Angular Material布局内容移动遮挡顶部工具栏

问题原因 #

当前布局未限制侧边栏容器的高度和滚动范围，页面发生滚动时整个mat-sidenav-container上移，就会遮挡放在容器外部的顶部mat-toolbar。

修复方案 #

推荐使用flex垂直布局实现，无需硬编码工具栏高度，适配性更强：

1. 首先在组件对应样式文件中添加如下CSS：

:host, html, body {
  height: 100%;
  margin: 0;
  display: flex;
  flex-direction: column;
}
/* 固定工具栏高度不被挤压 */
mat-toolbar {
  flex-shrink: 0;
}
/* 侧边栏容器占满剩余视口高度 */
.sidenav-container {
  flex-grow: 1;
}
/* 仅让内容区域可独立滚动，不会触发页面整体滚动 */
.mat-sidenav-content {
  overflow-y: auto;
}

2. 不需要修改原有HTML结构，添加上述样式后滚动只会在mat-sidenav-content内部发生，不会再出现内容遮挡顶部工具栏的问题。

如果你更习惯用固定定位的实现方式，也可以用以下CSS：

:host, html, body {
  height: 100%;
  margin: 0;
}
mat-toolbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
}
.sidenav-container {
  height: 100%;
  padding-top: 64px; /* 桌面端默认工具栏高度为64px，移动端可调整为56px */
}
.mat-sidenav-content {
  height: 100%;
  overflow-y: auto;
}

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