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

Question

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

1) 如何在sidenav工具栏下方显示滚动条:

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

您需要在 sidenav 中关闭滚动并仅打开可滚动内容，即除工具栏（您所有的 h4s）之外的所有内容。为此，在工具栏下方的可滚动内容周围添加一个 DIV，并应用样式来固定工具栏的高度，并允许可滚动部分填充弹性框内剩余的 space。

<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 class

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

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

Answer 2

@G.Tranter 尊敬的先生，

实际上，我正在使用 Angular Material-7，我错误地把它贴在了Angular-6,

下

您的解决方案 在 Angular-6 上有效，但是在Angular-7,

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

关于下面link中的mat-drawer-inner-container也提出了类似的问题 https://github.com/angular/material2/issues/13983

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

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

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

how to show the Scrollbar below the Sidenav Toolbar in AngularMaterial-7

scrollbar

angular

angular-material-7

提前致谢！