Angular中mat-sidenav-container与scrollPositionRestoration兼容问题

你的问题核心在于滚动容器不匹配：Angular的scrollPositionRestoration默认监听全局window的滚动位置，但当前布局下，mat-sidenav-container被设置了固定高度，导致滚动行为发生在mat-sidenav-content内部而非window，所以pageYOffset始终为0，滚动恢复功能失效。

无需大量自定义代码，只需调整布局结构和样式，让window成为滚动容器即可解决问题：

1. 修正布局结构 #

将mat-toolbar移出mat-sidenav-container，让容器单独包裹侧边栏和内容区，正确结构如下：

<mat-toolbar>
  <button mat-icon-button (click)="sidenav.toggle()" class="menu-button">
    <mat-icon>menu</mat-icon>
  </button>
  <!-- 工具栏其他内容 -->
</mat-toolbar>

<mat-sidenav-container>
  <mat-sidenav #sidenav>
    <div class="d-flex flex-column h-100">
      <mat-nav-list>
        <app-sidemenu></app-sidemenu>
      </mat-nav-list>
      <div class="flex-grow-1"></div>
      <div class="d-flex justify-content-around mb-3">
        <button mat-icon-button (click)="logout()">
          <mat-icon>logout</mat-icon>
        </button>
      </div>
    </div>
  </mat-sidenav>

  <mat-sidenav-content>
    <router-outlet></router-outlet>
  </mat-sidenav-content>
</mat-sidenav-container>

2. 调整样式配置 #

修改SCSS，让全局window成为滚动主体，同时固定工具栏位置：

html, body {
  height: 100%;
  margin: 0;
  overflow: auto;
}

mat-toolbar {
  position: sticky;
  top: 0;
  z-index: 100;
}

mat-sidenav-container {
  height: calc(100vh - 64px); /* 64px为mat-toolbar默认高度，可根据实际调整 */
}

.mat-sidenav {
  width: 220px;
}

.toolbar-logo img {
  height: 20px;
}

3. 确认滚动恢复配置 #

确保AppModule中已正确启用scrollPositionRestoration：

@NgModule({
  imports: [
    RouterModule.forRoot(routes, {
      scrollPositionRestoration: 'enabled' // 可选值：'enabled' | 'top' | disabled
    })
  ]
})
export class AppModule { }

原理说明 #

• 让html和body占满视口并允许滚动，将滚动行为转移到全局window
• mat-toolbar设置为sticky固定在顶部，避免滚动时被遮挡
• mat-sidenav-container高度适配视口剩余空间，内部不再独立滚动，确保window.pageYOffset能正确记录滚动位置，从而让Angular的原生滚动恢复功能生效

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