title: Angular 5 Stop background scrolling when mat-sidenav-container displayed
body: <p>I'm creating a new <code>Angular 5</code> site that has a <code>mat-sidenav</code> but i have an issue with it.</p>
  
  <p>My <code>mat-sidenav-container</code> sits under my <code>position: fixed</code> main menu which is fine but if the page has a vertical scroll, if the <code>mat-sidenav</code> is displayed it too scrolls.</p>
  
  <p>What i'm after is to stop the back content scrolling if the <code>mat-sidenav</code> is displayed but i don't know the <code>CSS</code> to do this as i have tried all the <code>position</code></p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;mat-toolbar&gt;
      &lt;mat-icon class="subMenuIcon" (click)="sidenav.toggle()" title="Click to open the sub-menu."&gt;reorder&lt;/mat-icon&gt;
      &lt;img src="./assets/images/Crest.jpg"&gt;LEARNING SITE
      &lt;div class="emptySpace"&gt;&lt;/div&gt;        
      &lt;mat-icon class="loggedInIcon"&gt;person&lt;/mat-icon&gt;
      &lt;span style="font-size: 15px"&gt;USERNAME&lt;/span&gt;
  &lt;/mat-toolbar&gt;
  &lt;mat-sidenav-container&gt;
      &lt;mat-sidenav #sidenav mode="over" opened="false"&gt;
          &lt;div class="closeButton"&gt;
              &lt;mat-icon (click)="sidenav.toggle()" title="Click to close the sub-menu."&gt;clear&lt;/mat-icon&gt;
          &lt;/div&gt;
          &lt;a (click)="sidenav.toggle()" routerLink="/"&gt;
              &lt;mat-icon&gt;person&lt;/mat-icon&gt;
              Dashboard
          &lt;/a&gt;
          &lt;a (click)="sidenav.toggle()" routerLink="search"&gt;
              &lt;mat-icon&gt;search&lt;/mat-icon&gt;
              Search
          &lt;/a&gt;
      &lt;/mat-sidenav&gt;
  &lt;/mat-sidenav-container&gt;
  &lt;router-outlet&gt;&lt;/router-outlet&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>mat-sidenav {
      background-color: gray;
      margin-top: 64px;
      color: #ffffff;
      transition: 0.5s;
      padding: 7px;
  }
  
  mat-sidenav a {
      margin-top: 15px;
      margin-bottom: 15px;
      font-size: 17px;
      color: #ffffff;
      display: block;
  }
  
  mat-sidenav a:hover {
      color: #c41230;
      cursor: pointer;
  }
  
  .closeButton {
      text-align: right;
      margin-bottom: 15px;
      cursor: pointer;
  }
  
  .mat-drawer-container {
      position: static;
  }
  
  /* Moves the side-nav to below the main menu */
  .mat-drawer-backdrop {
      margin-top: 64px !important;
  }
  </code></pre>