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

Posted 2023-02-18

【中文标题】具有双倍滚动内容的 Angular Material Sidenav

【英文标题】：Angular Material Sidenav with doubled scrolling content

【发布时间】：2021-03-10 07:40:53

【问题描述】：

对于基于角度材料的项目，我尝试使用 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 元素上使用overflow: hidden 等CSS 操作会切断不可见的内容，并将其应用于mat-sidenav-container 元素根本不会影响它。

这是StackBlitz Example

依赖版本：

@angular: 9.1.12 @angular/材质：9.2.4

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

【参考方案1】：

工具栏粘在 md 内容而不是主体上 -> 内部滚动条，并且像有角材料的网站一样，它们删除了主滚动并使用：

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

只保留内部的。

【讨论】：

所提到的 CSS 更改也会影响屏幕视图，即它会切断页面的页脚部分（以前通过滚动可以到达它）。顺便说一句，在这种情况下 max-width 和 max-height 的目的是什么？