时间戳

首页 > 解决方案 > 具有双倍滚动内容的 Angular Material Sidenav

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

问题描述

对于基于角度材料的项目，我尝试根据用户的设备（台式机或手机）使用具有不同视图可能性的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>

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

这是一个StackBlitz 示例

依赖版本：

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

标签： angularangular-materialmat-sidenav

解决方案

工具栏坚持 md-content 而不是 body -> 内部滚动条，并且像角度材料的网站一样，它们删除了主滚动并使用：

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

并只保留内部的。

推荐阅读