代码之家 › 专栏 › 技术社区 › user p

如何修复Angular Material侧边栏的滚动问题

scrollbar angular-material sass angular css

1

user p · 技术社区 · 8 月前

我的预期结果:

在桌面上,屏幕左侧有一个“固定”侧边栏,它占据了全屏高度,宽度为 226px .
在移动设备上,应该有一个工具栏可以从左侧打开侧面板
用户不应该能够滚动工具栏,应该只能滚动内容

我目前在第3点遇到了问题,在那里我似乎无法获得正确的高度和溢出。底部的填充不可见,有两个滚动条可用。为了到达完整的底部/顶部,您需要将两个滚动条滚动到底部/顶部,所以我不能只是隐藏它们。我想我在设定高度时犯了一个错误,但我找不到错误。

如何获得一个只滚动内容的滚动条 mat-sidenav-content ?

Stackblitz链接*: https://stackblitz.com/edit/stackblitz-starters-eapqhq2k?file=src%2Fsidebar%2Fsidebar.component.scss

*我的isMobile()信号在stackblitz中似乎不起作用,所以要测试桌面版本,你必须将其映射为false或找到不同的方法来解决它。但这确实代表了我的代码最好

侧边栏html

@if (isMobile()) {
  <mat-toolbar class="mobile-toolbar" aria-label="Toolbar">
    <button (click)="sidenav.toggle()">Toggle</button>
  </mat-toolbar>
}

<mat-sidenav-container class="sidenav-container" [class.mobile]="isMobile()">
  <mat-sidenav
    #sidenav
    class="sidenav"
    [class.mobile]="isMobile()"
    [mode]="isMobile() ? 'over' : 'side'"
    [opened]="!isMobile()"
  >
    <div class="sidebar-content">
      <button>
        test
      </button>
    </div>
  </mat-sidenav>

  <mat-sidenav-content
    class="sidenav-content"
    [class.mobile]="isMobile()">
    <router-outlet></router-outlet>
    <div class="test-long-content">
      <h1>Test</h1>
    </div>
  </mat-sidenav-content>
</mat-sidenav-container>

侧边栏scss

.sidenav-container {
  height: 100vh;

  &.mobile {
    overflow-y: auto;
    height: calc(100vh - 64px);
  }
}

.sidenav-content {
  background-color: grey;
  overflow-y: auto;

  &.mobile {
    padding: 2vh 5vw 2vh 5vw;
  }

  .test-long-content {
    height: 1000px;
    background-color: red;
  }
}

.sidenav {
  background-color: black;

  overflow-y: auto;
  width: 226px;

  display: flex;
  flex-direction: column;
  justify-content: space-between;

  .mobile {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    margin-top: 64px;
  }

  .sidebar-content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
  }
}

.mobile-toolbar {
  background: black;
  height: 64px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: sticky;
  top: 0;
  left: 0;
  z-index: 1000;
}

1 回复 | 直到 8 月前

1

Naren Murali 8 月前

这个 padding 导致的大小 mat-sidenav-content 尺寸超过设定的限制。

我们可以使用CSS box-sizing: border-box; 这样填充将填充元素的内部尺寸,而不是导致额外滚动条的外部尺寸。

Box Sizing CSS - MDN Docs

.sidenav-content {
  background-color: grey;
  overflow-y: auto;

  &.mobile {
    padding: 2vh 5vw 2vh 5vw;
    box-sizing: border-box; // <- changed here!
  }

  .test-long-content {
    height: 1000px;
    background-color: red;
  }
}

如何修复Angular Material侧边栏的滚动问题

Stackblitz Demo