4

在此处输入图像描述请帮我实现以下两种方法：

1）如何在sidenav工具栏下方显示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>

4

2 回答 2

7

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

<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 的回答中所述，mat-drawer-inner-container如果您不想添加这个额外的 DIV，也可以覆盖该类。

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

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

于 2018-11-29T22:06:09.763 回答
0

@G.Tranter亲爱的先生，

实际上，我使用的是Angular Material- 7，我错误地将其发布在 Angular- 6下，

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

经过检查，我发现了 Angular-7，另外在 Sidenav 中添加了mat-drawer-inner-container 。

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

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

.mat-drawer-inner-container {
        display: flex;
        flex-direction: column;
      }
于 2018-11-30T07:25:47.053 回答