如何禁用内容区域在鼠标滚动时移动

Question

我有一个这样实现的布局stackbliz:

<mat-toolbar color="primary">
  <button
    type="button"
    aria-label="Toggle sidenav"
    mat-icon-button
    (click)="drawer.toggle()">
    <mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
  </button>
  <span>dashboard-app</span>
</mat-toolbar>
    
<mat-sidenav-container class="sidenav-container">
  <mat-sidenav #drawer class="sidenav" mode="side">
    <mat-toolbar>Menu</mat-toolbar>
    <mat-nav-list>
      <a mat-list-item href="#">Link 1</a>
      <a mat-list-item href="#">Link 2</a>
      <a mat-list-item href="#">Link 3</a>
    </mat-nav-list>
  </mat-sidenav>
  <mat-sidenav-content>
    My app content
  </mat-sidenav-content>
</mat-sidenav-container>

存在的问题是，当您滚动鼠标滚轮时，内容会在顶部工具栏上上下移动。你会如何解决这个问题？

Answer 1

这是问题的根源（在 'navigation.component.css' 中）：

.sidenav-container {
  height: 100%;
}

您可以使用 FlexLayoutModule 更轻松可靠地填充父组件。

npm i @angular/flex-layout

<div style="overflow: hidden;" fxFill>
  <mat-toolbar color="primary">
    <button
      type="button"
      aria-label="Toggle sidenav"
      mat-icon-button
      (click)="drawer.toggle()">
      <mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
    </button>
    <span>dashboard-app</span>
  </mat-toolbar>

  <mat-sidenav-container fxFill>
    <mat-sidenav #drawer class="sidenav" mode="side">
      <mat-toolbar>Menu</mat-toolbar>
      <mat-nav-list>
        <a mat-list-item href="#">Link 1</a>
        <a mat-list-item href="#">Link 2</a>
        <a mat-list-item href="#">Link 3</a>
      </mat-nav-list>
    </mat-sidenav>
    <mat-sidenav-content>
      My app content
    </mat-sidenav-content>
  </mat-sidenav-container>
</div>

这对我有用，但你可以稍微清理一下。

您还可以：

只需将组件包装为：

<div style="overflow: hidden;"></div>

添加溢出：隐藏；到 styles.css
对导航栏高度进行硬编码，并在组件上使用 'height: calc(100% - navbarHeight);'

如何禁用内容区域在鼠标滚动时移动

How to disable the content area to move on mouse scroll

angular-material

angular