谢谢。！

<mat-sidenav-container fullscreen>
  <!-- SIDENAV -->
  <mat-sidenav [mode]="showLeftNAV ? 'side' : 'over'" [opened]="showLeftNAV" class="mat-elevation-z10" style="width:312px;border: 0px;">
    <!-- SIDENAV-HEADER-TOOLBAR -->
    <mat-toolbar color="primary" style="height:112px;position: sticky; top: 0; z-index: 10;">HELLO</mat-toolbar>
    <!--SIDENAV-BODY-CONTENT -->
    <h4 mat-line>SAMPLE TEXT</h4>
    <h4 mat-line>SAMPLE TEXT</h4>
    <h4 mat-line>SAMPLE TEXT</h4>
    <h4 mat-line>SAMPLE TEXT</h4>
    <h4 mat-line>SAMPLE TEXT</h4>
    <h4 mat-line>SAMPLE TEXT</h4>
    <h4 mat-line>SAMPLE TEXT</h4>
    <h4 mat-line>SAMPLE TEXT</h4>
    <h4 mat-line>SAMPLE TEXT</h4>
    <h4 mat-line>SAMPLE TEXT</h4>
    <h4 mat-line>SAMPLE TEXT</h4>
    <h4 mat-line>SAMPLE TEXT</h4>
    <h4 mat-line>SAMPLE TEXT</h4>
    <h4 mat-line>SAMPLE TEXT</h4>
    <h4 mat-line>SAMPLE TEXT</h4>
    <h4 mat-line>SAMPLE TEXT</h4>
    <h4 mat-line>SAMPLE TEXT</h4>
    <h4 mat-line>SAMPLE TEXT</h4>
    <h4 mat-line>SAMPLE TEXT</h4>
    <h4 mat-line>SAMPLE TEXT</h4>
    <h4 mat-line>SAMPLE TEXT</h4>
    <h4 mat-line>SAMPLE TEXT</h4>
    <h4 mat-line>SAMPLE TEXT</h4>
    <h4 mat-line>SAMPLE TEXT</h4>
    <h4 mat-line>SAMPLE TEXT</h4>
    <h4 mat-line>SAMPLE TEXT</h4>
    <h4 mat-line>SAMPLE TEXT</h4>
    <h4 mat-line>SAMPLE TEXT</h4>
    <h4 mat-line>SAMPLE TEXT</h4>
    <h4 mat-line>SAMPLE TEXT</h4>
  </mat-sidenav>
  <!-- CONTENT -->
  <mat-sidenav-content>
    <!-- CONTENT-TOOLBAR -->
    <mat-toolbar color="primary" style="height:112px;position: sticky; top: 0; z-index: 10;">
      CONTENT-AREA
    </mat-toolbar>
  </mat-sidenav-content>
</mat-sidenav-container>

Answer 1

您需要关闭sidenav中的滚动，然后仅打开可滚动内容，该内容是除工具栏（所有h4s）以外的所有内容。为此，请在工具栏下方的可滚动内容周围添加DIV，然后应用样式固定工具栏的高度，并允许可滚动部分填充flexbox内的剩余空间。

<mat-toolbar style="flex: 0 0 128px;">HELLO</mat-toolbar>
<div style="overflow-y: auto;">
  <!- menu content -->
</div>

还可以向菜单内容容器中添加一些样式，以关闭垂直滚动并为菜单内容提供flexbox布局。

.no-v-scroll {
  height: 100%;
  overflow-y: hidden; 
  display: flex; 
  flex-direction: column;
}

在Angular Material v6中，您可以将该样式直接应用于mat-sidenav：

<mat-sidenav class="no-v-scroll" style="width: 320px;">
  <mat-toolbar style="flex: 0 0 128px;">HELLO</mat-toolbar>
  <div style="overflow-y: auto;">
    <!- menu content -->
  </div>
</mat-sidenav>

但是在v7中，菜单内容（工具栏和滚动条）周围需要额外的DIV：

<mat-sidenav style="width: 320px;">
  <div class="no-v-scroll">
    <mat-toolbar style="flex: 0 0 128px;">HELLO</mat-toolbar>
    <div style="overflow-y: auto;">
      <!- menu content -->
    </div>
  </div>
</mat-sidenav>

如OP的答复所述，如果您不想添加此额外的DIV，则也可以覆盖mat-drawer-inner-container类。

这是OP对v6 on StackBlitz的修改后的代码。

这是OP对v7 on StackBlitz的修改后的代码。

Answer 2

@ G.Tranter 尊敬的先生，

实际上，我使用角材料- 7 ，我错误地将其发布在Angular- 6 下，

您的解决方案适用于在Angular- 6 上，但是不是在Angular- 7 上

检查之后，我发现了Angular-7，并在Sidenav中添加了 mat-drawer-inner-container 。

在下面的链接中也对 mat-drawer-inner-container 提出了类似的问题 https://github.com/angular/material2/issues/13983

所以现在，在 app.component.scss 中，我添加了以下样式以使其起作用。

.mat-drawer-inner-container {
        display: flex;
        flex-direction: column;
      }

如何在AngularMaterial-7中的Sidenav工具栏下方显示滚动条

谢谢。！

2 个答案: