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

Question

请帮我实现以下两种方法:

1) 如何在侧导航中显示侧导航工具栏下方的滚动条:

2)还有如何显示滚动条仅当我们将鼠标光标移动到侧面导航栏上时。

提前致谢。!

<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

您需要关闭侧导航中的滚动，并仅打开可滚动内容，即除工具栏(所有 h4)之外的所有内容。为此，请在工具栏下方的可滚动内容周围添加一个 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 .