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

Question

Please help me to achieve the below two methods:

1) How to show the sidenav scrollbar below the toolbar in the sidenav:

2) Also how to show the Scrollbar only when we move the mouse cursor over the side nav.

Thanks in advance.!

<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

You need turn off scrolling in the sidenav and turn in on for only the scrollable content which is everything except the toolbar (all your h4s). To do that, add a DIV around the scrollable content below the toolbar, and apply style to fix the height of the toolbar and allow the scrollable section to fill the remaining space inside a flexbox.

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

Also add some style to the menu content container to turn off vertical scrolling and provide the flexbox layout for the menu content.

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

In Angular Material v6 you can apply that style directly to 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>

But in v7 an extra DIV is needed around the menu content (toolbar plus scrollable):

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

As mentioned in the OP's answer, you can also override the mat-drawer-inner-container class if you don't want to add this extra DIV.

Here is the OP's modified code for v6 on StackBlitz.

Here is the OP's modified code for v7 on StackBlitz.

Answer 2

@G.Tranter Dear sir,

Actually, I'm using Angular Material-7, I've mistakenly posted it under Angular-6,

Your solution worked on Angular-6, But Not on Angular-7,

After inspecting, I've found out Angular-7, additionally adds mat-drawer-inner-container inside the Sidenav.

A similar question was also raised about the mat-drawer-inner-container in the below link https://github.com/angular/material2/issues/13983

So now, in the app.component.scss I've added the below style to make it work.

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