Material sidenav 滚动始终可见

Question

在默认行为中，sidenav 滚动条仅在内容超出 Y 轴限制时显示。是否可以使滚动条始终可见，而不管内容是否在限制范围内？

我想要这个是因为滚动条出现和消失的效果会触发响应并移动中心内容。因此，每次我打开或关闭 mat-menu-items 之一 accordions 时，滚动条会淡出并出现，从而触发响应。

<mat-drawer-container class="sidemenu-container" autosize>
  <mat-drawer #drawer class="sidemenu-drawer" mode="side" [class.mat-elevation-z8]=true>

    <mat-nav-list>

      <mat-list-item>
         <a href="#" class="sidemenu-items-link">
           <mat-icon>widgets</mat-icon>
           Dashboard
          </a>
      </mat-list-item>

      <mat-list-item>
        <a href="#" class="sidemenu-items-link">
          <mat-icon>face</mat-icon>
          Clientes
         </a>
      </mat-list-item>

      <mat-accordion>
        <mat-expansion-panel [class.mat-elevation-z0]=true>
          <mat-expansion-panel-header>
            <mat-panel-title>
              <mat-icon>assignment_ind</mat-icon>
              Colaboradores
            </mat-panel-title>
          </mat-expansion-panel-header>

          <mat-list-item>
            <a href="#" class="sidemenu-items-link">
              <mat-icon>people_outline</mat-icon>
              Funcionários/Grupos
            </a>
          </mat-list-item>

          <mat-list-item>
            <a href="#" class="sidemenu-items-link">
              <mat-icon>card_membership</mat-icon>
              Perfis
            </a>
          </mat-list-item>

          <mat-list-item>
            <a href="#" class="sidemenu-items-link">
              <mat-icon>date_range</mat-icon>
              Escalas
            </a>
          </mat-list-item>

          <mat-list-item>
            <a href="#" class="sidemenu-items-link">
              <mat-icon>access_time</mat-icon>
              Ponto
            </a>
          </mat-list-item>

        </mat-expansion-panel>
      </mat-accordion>

      <mat-accordion>
        <mat-expansion-panel [class.mat-elevation-z0]=true>
          <mat-expansion-panel-header>
            <mat-panel-title>
              <mat-icon>domain</mat-icon>
              Ativos
            </mat-panel-title>
          </mat-expansion-panel-header>

          <mat-list-item>
            <a href="#" class="sidemenu-items-link">
              <mat-icon>drive_eta</mat-icon>
              Frota
            </a>
          </mat-list-item>

          <mat-list-item>
            <a href="#" class="sidemenu-items-link">
              <mat-icon>devices_other</mat-icon>
              Almoxarifado
            </a>
          </mat-list-item>
        </mat-expansion-panel>
      </mat-accordion>

      <mat-accordion>
        <mat-expansion-panel [class.mat-elevation-z0]=true>
          <mat-expansion-panel-header>
            <mat-panel-title>
              <mat-icon>business_center</mat-icon>
              Administrar
            </mat-panel-title>
          </mat-expansion-panel-header>

          <mat-list-item>
            <a href="#" class="sidemenu-items-link">
              <mat-icon>attach_money</mat-icon>
              Despesas
            </a>
          </mat-list-item>

          <mat-list-item>
            <a href="#" class="sidemenu-items-link">
              <mat-icon>account_balance_wallet</mat-icon>
              Adiantamentos
            </a>
          </mat-list-item>

          <mat-list-item>
            <a href="#" class="sidemenu-items-link">
              <mat-icon>ev_station</mat-icon>
              Abastecimentos
            </a>
          </mat-list-item>

          <mat-list-item>
            <a href="#" class="sidemenu-items-link">
              <mat-icon>tune</mat-icon>
              Ajustes
            </a>
          </mat-list-item>

        </mat-expansion-panel>
      </mat-accordion>

      <mat-accordion>
        <mat-expansion-panel [class.mat-elevation-z0]=true>
          <mat-expansion-panel-header>
            <mat-panel-title>
              <mat-icon>local_shipping</mat-icon>
              Visitas
            </mat-panel-title>
          </mat-expansion-panel-header>

          <mat-list-item>
            <a href="#" class="sidemenu-items-link">
              <mat-icon>list</mat-icon>
              Chamados/Tarefas
            </a>
          </mat-list-item>

          <mat-list-item>
            <a href="#" class="sidemenu-items-link">
              <mat-icon>assignment</mat-icon>
              Ordens de Serviço
            </a>
          </mat-list-item>

        </mat-expansion-panel>
      </mat-accordion>

    </mat-nav-list>

  </mat-drawer>

  <div class="sidemenu-content">
    <p>É um facto estabelecido de que um leitor é distraído pelo conteúdo legível de uma página quando analisa a sua
      mancha gráfica. Logo, o uso de Lorem Ipsum leva a uma distribuição mais ou menos normal de letras, ao contrário do
      uso de "Conteúdo aqui, conteúdo aqui", tornando-o texto legível. Muitas ferramentas de publicação electrónica e
      editores de páginas web usam actualmente o Lorem Ipsum como o modelo de texto usado por omissão, e uma pesquisa
      por "lorem ipsum" irá encontrar muitos websites ainda na sua infância. Várias versões têm evoluído ao longo dos
      anos, por vezes por acidente, por vezes propositadamente (como no caso do humor).</p>
  </div>
</mat-drawer-container>

正如您在 sidenav 代码中看到的，一些 mat-list-items 是 accordions。如果我打开多个手风琴，滚动条就会出现，如果我关闭它，它就会消失。由于响应性，这会在中心内容中产生持续的移动。

如果我能让滚动条始终可见，问题就解决了。

Answer 1

也许 css class 您可以使整个导航超过视口的高度。 height: 105vh;。或者你可以 disable 滚动条一起。

Answer 2

负责 sidenav 滚动条的组件是一个创建的运行时 div，它具有 class mat-drawer-inner-container。要使滚动条始终可见，只需为该元素定义 overflow-y: scroll! Important; 即可。 !important 在 angular 中不是很清楚，但这是我得到它的唯一方法。就我而言：

mat-drawer {
    .mat-drawer-inner-container {
        overflow-y: scroll !important;
    }
}

在styles.scss

Material sidenav 滚动始终可见

Material sidenav with scrolling always visible

angular-material

angular

sidenav