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

问题描述

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

<按钮类型=按钮"aria-label="切换 sidenav";垫图标按钮(click)="drawer.toggle()"><mat-icon aria-label=侧边导航切换图标">菜单</mat-icon><span>dashboard-app</span></mat-toolbar><mat-sidenav-container class="sidenav-container"><mat-sidenav #drawer class="sidenav";模式=侧面"><mat-toolbar>菜单</mat-toolbar><mat-nav-list><a mat-list-item href=#">链接1</a><a mat-list-item href=#">链接2</a><a mat-list-item href=#">链接3</a></mat-nav-list></mat-sidenav><mat-sidenav-content>我的应用内容</mat-sidenav-content></mat-sidenav-container>

问题在于，当您滚动鼠标滚轮时，内容会上下移动，将顶部工具栏分区.你会如何解决这个问题?

解决方案

这就是问题的根源(在 'navigation.component.css' 中):

.sidenav-container {高度:100%；}

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

npm i @angular/flex-layout

<mat-toolbar color="primary"><按钮类型=按钮"aria-label="切换 sidenav";垫图标按钮(click)="drawer.toggle()"><mat-icon aria-label=侧边导航切换图标">菜单</mat-icon><span>dashboard-app</span></mat-toolbar><mat-sidenav-container fxFill><mat-sidenav #drawer class="sidenav";模式=侧面"><mat-toolbar>菜单</mat-toolbar><mat-nav-list><a mat-list-item href=#">链接1</a><a mat-list-item href=#">链接2</a><a mat-list-item href=#">链接3</a></mat-nav-list></mat-sidenav><mat-sidenav-content>我的应用内容</mat-sidenav-content></mat-sidenav-container>

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

您还可以:

• 只需使用以下内容包装组件:

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

• 添加溢出:隐藏；到styles.css中的body标签
• 硬编码导航栏高度，并使用'height: calc(100% - navbarHeight);'在组件上

I have a layout implemented like this 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>

The problem there is that when you scrolling the mouse wheel the content move up and down districting the top toolbar. How would you fix that?

解决方案

This is where the problem originates (in 'navigation.component.css'):

.sidenav-container {
  height: 100%;
}

You can use FlexLayoutModule to more easily and reliably fill parent components.

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

This worked for me, but you can probably clean it up a bit.

You can also:

• Just wrap the component with:

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

• Add overflow: hidden; to the body tag in styles.css
• Hardcode the navbar height, and use 'height: calc(100% - navbarHeight);' on the component

这篇关于如何禁用内容区域在鼠标滚动时移动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！