Question

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

我的mat-sidenav-container位于我的position: fixed主菜单下，这很好，但如果页面有垂直滚动，如果显示mat-sidenav，它也会滚动。

如果mat-sidenav显示但我不知道CSS执行此操作，那么我之后要停止后退内容滚动，因为我已经尝试了所有{ {1}}

HTML

position

CSS

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

Answer 1

方法1

在你的组件中（侧面导航所在的位置），添加一个hostListener，停止滚动事件的传播，然后只有你的sidenav会滚动，而不是背景。

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

方法2

您可以向sidenav添加滚动侦听器，并在那里停止传播。在组件中添加一个方法，并在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() }

Answer 2

使用CSS进行管理。不要打扰后面的内容滚动，但现在我的side-nav和背景不会移动

使用CSS

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

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

Answer 3

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

Answer 4

由于<mat-sidenav #sidenav>具有模板引用变量（#sidenav），因此<mat-sidenav-container>可以使用条件样式进行固定（就位），从而在打开sidnav时有效地消除了背景滚动。

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

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

4 个答案: