具有双倍滚动内容的 Angular Material Sidenav

Question

对于基于 Angular Material 的项目，我正在尝试使用 sidenav具有不同 View 可能性的组件，具体取决于用户的设备(台式机或手机)。到目前为止它有效，但有一些问题。也就是说，内容一旦变长就会变成双倍滚动。

HTML 结构:

<mat-toolbar color="primary">
  <button mat-icon-button *ngIf="...">
    <mat-icon>menu</mat-icon>
  </button>
  Toolbar
</mat-toolbar>

<mat-sidenav-container>
  <mat-sidenav #sidenav ...>
    <mat-nav-list>
      <a mat-list-item (click)="closeSidenav()" routerLink="/item1">Item 1</a>
    </mat-nav-list>
  </mat-sidenav>

  <mat-sidenav-content class="content">
    <router-outlet></router-outlet>
    <footer>&copy; 2020 Lorem impsum. Dolor sit amet.</footer>
  </mat-sidenav-content>
</mat-sidenav-container>

在 mat-sidenav-content 元素上使用 overflow: hidden 等 CSS 操作来切断不可见的内容，并将其应用于 mat-sidenav- container 元素根本不会影响它。

这是一个StackBlitz Example

依赖版本:

• @angular: 9.1.12
• @angular/material: 9.2.4

那么，我做错了什么？有谁知道如何解决这一问题？或者在 Angular 项目中实现 sidenav + 工具栏的干净/更好的方法？任何帮助将不胜感激!

Answer 1

工具栏坚持 md-content 而不是 body -> 内部滚动条，就像 Angular Material 的网站一样，他们删除了主滚动条并使用:

body { overflow: hidden; max-width: 100%; max-height: 100%; } 

只保留内部的。