如何让mat-drawer左侧菜单内容在页面滚动时保持固定？

问题出在mat-drawer默认样式上，它自带overflow:auto属性，导致内部的sticky元素只会相对于drawer的滚动视口固定，而非整个页面。按以下步骤修改即可：

1. 调整容器样式 #

给mat-sidenav-container设置全屏高度，确保页面滚动区域正确：

mat-sidenav-container {
  height: 100vh;
}

2. 修改mat-drawer的overflow属性 #

去掉drawer自身的滚动，让内容跟随页面整体滚动：

mat-sidenav {
  overflow: visible;
  width: 250px; /* 根据需求调整宽度 */
}

3. 给菜单添加sticky样式 #

给菜单容器设置sticky定位，并添加背景色防止内容穿透：

.sticky-menu {
  position: sticky;
  top: 0;
  background-color: #fff;
  padding: 16px; /* 可选，调整内边距 */
}

4. 更新HTML结构 #

将菜单内容包裹在带有sticky-menu类的容器中：

<mat-drawer mode="side" opened>
  <div class="sticky-menu">
    <!-- 你的菜单内容 -->
    <p>菜单选项1</p>
    <p>菜单选项2</p>
    <p>菜单选项3</p>
    <p>菜单选项4</p>
  </div>
</mat-drawer>

<mat-drawer-content>
  <!-- 页面滚动内容 -->
  <div style="height: 2000px; padding: 16px;">
    长内容区域...
  </div>
</mat-drawer-content>

完成以上修改后，页面滚动时左侧菜单会始终固定在屏幕顶部可见区域。

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