显示 mat-sidenav-container 时，Angular 5 停止背景滚动

Question

I'm creating a new Angular 5 site that has a mat-sidenav but i have an issue with it.

My mat-sidenav-container sits under my position: fixed main menu which is fine but if the page has a vertical scroll, if the mat-sidenav is displayed it too scrolls.

What i'm after is to stop the back content scrolling if the mat-sidenav is displayed but i don't know the CSS to do this as i have tried all the position

HTML

<mat-toolbar>
    <mat-icon class="subMenuIcon" (click)="sidenav.toggle()" title="Click to open the sub-menu.">reorder</mat-icon>
    <img src="./assets/images/Crest.jpg">LEARNING SITE
    <div class="emptySpace"></div>        
    <mat-icon class="loggedInIcon">person</mat-icon>
    <span style="font-size: 15px">USERNAME</span>
</mat-toolbar>
<mat-sidenav-container>
    <mat-sidenav #sidenav mode="over" opened="false">
        <div class="closeButton">
            <mat-icon (click)="sidenav.toggle()" title="Click to close the sub-menu.">clear</mat-icon>
        </div>
        <a (click)="sidenav.toggle()" routerLink="/">
            <mat-icon>person</mat-icon>
            Dashboard
        </a>
        <a (click)="sidenav.toggle()" routerLink="search">
            <mat-icon>search</mat-icon>
            Search
        </a>
    </mat-sidenav>
</mat-sidenav-container>
<router-outlet></router-outlet>

CSS

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

Answer 1

在 mat-sidenav 中添加fixedInViewport="true"可能会解决该问题，同时添加[style.marginTop.px]="56"

Answer 2

METHOD 1

In your component (where side-nav is located), add a hostListener, where you stop the propagation of your scroll event, then only your sidenav will scroll, not the background.

  @HostListener("window:scroll", ["$event"])
  onWindowScroll(event) {
    // prevent the background from scrolling when the dialog is open.
    event.stopPropagation();
  }

METHOD 2

You can add a scroll listener to your sidenav, and stop the propagation there. add a method in your component, and use it in your html:

in the html, add: (scroll)="onSideNavScroll($event)" to your side-nav like this:

<mat-sidenav-container (scroll)="onSideNavScroll($event)">
        <mat-sidenav #sidenav mode="over" opened="false">
            <div class="closeButton">
                <mat-icon (click)="sidenav.toggle()" title="Click to close the sub-menu.">clear</mat-icon>
            </div>
            <a (click)="sidenav.toggle()" routerLink="/">
                <mat-icon>person</mat-icon>
                Dashboard
            </a>
            <a (click)="sidenav.toggle()" routerLink="search">
                <mat-icon>search</mat-icon>
                Search
            </a>
        </mat-sidenav>
    </mat-sidenav-container>

In your component, add this function:

onSideNavScroll(event){ event.stopPropagation() }

Answer 3

Managed to do it with a bit of CSS . not bother that the back content scrolls but now my side-nav and backdrop do not move

CSS Used

.mat-drawer:not(.mat-drawer-side) {
    position: fixed;
}

.mat-drawer-backdrop {
    position: fixed !important;
}

Answer 4

由于<mat-sidenav #sidenav>有一个模板引用变量 (#sidenav)， <mat-sidenav-container>可以使用条件样式固定（就位），从而在打开 sidnav 时有效地移除背景滚动。

<mat-sidenav-container [ngStyle] = "{ 'position' : sidenav.opened ? 'fixed' : 'relative'}">