如何解决 Angular Material 侧边栏的滚动问题

Question

我的预期结果：

• 在桌面上时，屏幕左侧有一个“固定”侧边栏，它占据全屏高度，宽度为

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

Answer 1

padding

导致

mat-sidenav-content

尺寸超出设定限制。

我们可以使用 CSS

box-sizing: border-box;

，这样内边距将填充元素的内部尺寸，而不是外部尺寸，这会导致额外的滚动条。

.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;
  }
}

Stackblitz 演示