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

Question

我正在创建一个新的 Angular 5 网站，其中包含一个 mat-sidenav，但我遇到了一个问题。

我的 mat-sidenav-container 位于固定位置的主菜单下方，这没问题，但如果页面有垂直滚动条，并且显示了 mat-sidenav，那么它也会滚动。

我想要的是，当 mat-sidenav 显示时停止背景内容的滚动，但我不知道如何使用 CSS 实现这一点，因为我尝试了所有的 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;
}

- murday1983

Answer 1

在 mat-sidenav 中添加 fixedInViewport="true" 可能会修复该问题，还需添加 [style.marginTop.px]="56"

- Gour Gopal

---

这有助于保持抽屉的位置，但另一行却搞砸了一切。 - eddy

在 https://material.angular.io/components/sidenav/api#MatSidenav 上，你可以使用 fixedTopGap 属性来代替手动设置 marginTop。 - adamdport

Answer 2

由于<mat-sidenav #sidenav>具有模板引用变量(#sidenav)，因此可以使用条件样式来固定<mat-sidenav-container>(在位置上)，从而有效地在打开侧边栏时消除背景滚动。

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

- Nipuna Saranga

---

它确实可以工作，但有一个错误。页面会滚动到顶部，这不好。 - Santosh

Answer 3

方法一

在你的组件中（side-nav所在的位置），添加一个hostListener，阻止滚动事件的传播，这样只有你的sidenav会滚动，而不是背景。

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

方法2

您可以向导航栏添加滚动监听器并在此处停止传播。在组件中添加一个方法，并在html中使用它：

在html中添加：(scroll)="onSideNavScroll($event)"，就像这样将其添加到侧边栏中：

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

在您的组件中，添加此函数：

onSideNavScroll(event){ event.stopPropagation() }

- John

---

请注意，在 onWindowScroll(event) 方法中，您的变量 event 是未定义的。将以下内容应用于方法1的第一行：@HostListener("window:scroll", ["$event"])。我在 Angular 6+ 中使用了这个。 - andreas

我尝试了两个选项。都没有起作用。你有什么办法可以在侧边栏显示时停止主内容的滚动吗？ - eddy

没有看到你的代码很难判断。也许你可以提出一个问题，链接到这个帖子，从那里得到一些帮助？ - John

Answer 4

通过一点 CSS 成功实现了。虽然后面的内容可以滚动，但现在我的 side-nav 和背景不会移动了。

使用的 CSS：

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

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

- murday1983

---

你是否成功避免在显示mat-sidenav时在主内容中显示滚动条？ - eddy