具有双倍滚动内容的角度材质侧导航

Question

对于一个基于角度材料的项目，我试图使用sidenav组件，根据用户的设备(桌面或手机(，使用不同的视图可能性。到目前为止，它是有效的，但也存在一些问题。也就是说，一旦内容变长，它就会变成双倍滚动。

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元素上使用CSS操作(如overflow: hidden(可以剪切不可见的内容，将其应用于mat-sidenav-container元素不会对其产生任何影响。

以下是StackBlitz 示例

依赖版本：

• @角度：9.1.12
• @角度/材料：9.2.4

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

Answer 1

工具栏坚持md内容而不是正文->内部滚动条和像网站的角度材料他们删除主滚动和使用：

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

只保留内部的。