对于基于 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>© 2020 Lorem impsum. Dolor sit amet.</footer>
</mat-sidenav-content>
</mat-sidenav-container>
在 mat-sidenav-content
元素上使用 overflow: hidden
等 CSS 操作来切断不可见的内容,并将其应用于 mat-sidenav- container
元素根本不会影响它。
依赖版本:
- @angular: 9.1.12
- @angular/material: 9.2.4
那么,我做错了什么?有谁知道如何解决这一问题?或者在 Angular 项目中实现 sidenav + 工具栏的干净/更好的方法?任何帮助将不胜感激!
最佳答案
工具栏坚持 md-content 而不是 body -> 内部滚动条,就像 Angular Material 的网站一样,他们删除了主滚动条并使用:
body { overflow: hidden; max-width: 100%; max-height: 100%; }
只保留内部的。
关于具有双倍滚动内容的 Angular Material Sidenav,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/65038754/