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

Posted 2023-03-06

【中文标题】Angular 5在显示mat-sidenav-container时停止背景滚动

【英文标题】：Angular 5 Stop background scrolling when mat-sidenav-container displayed

【发布时间】：2018-09-28 08:14:21

【问题描述】：

我正在创建一个具有 mat-sidenav 的新 Angular 5 站点，但我遇到了问题。

我的mat-sidenav-container 位于我的position: fixed 主菜单下，这很好，但如果页面有垂直滚动，如果显示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;

【参考方案1】：

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

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

【讨论】：

它确实有效，但有一个错误。页面滚动到顶部，这不好。

【参考方案2】：

方法一

在您的组件（side-nav 所在的位置）中，添加一个 hostListener，您可以在其中停止滚动事件的传播，然后只有您的 sidenav 会滚动，而不是背景。

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

方法 2

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

【讨论】：

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

我尝试了这两个选项。他们都没有工作。您知道如何在显示 sidenav 时停止滚动主要内容吗？

没有看过你的代码很难说清楚。也许您可以提出问题、链接到该主题并从那里获得帮助？

【参考方案3】：

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

【讨论】：

这有助于将抽屉固定在适当的位置，但另一行会搞砸一切。

您可以使用fixedTopGap 属性来代替手动设置marginTop material.angular.io/components/sidenav/api#MatSidenav

【参考方案4】：

设法做到了一点CSS。不用担心后面的内容会滚动，但现在我的 side-nav 和背景不会移动

使用的 CSS

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


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

【讨论】：

当 mat-sidenav 显示时，您是否设法避免在主要内容中显示滚动条？