0

在默认行为中,sidenav仅当内容超出 Y 轴的限制时才会显示滚动条。无论内容是否在限制范围内,是否可以使滚动条始终可见?

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

<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-itemsaccordions. 如果我打开多个手风琴,滚动条就会出现,如果我关闭它,它就会消失。由于响应性,这会在中心内容中产生持续的移动。

在此处输入图像描述 在此处输入图像描述

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

4

2 回答 2

0

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

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

样式.scss

于 2020-08-24T20:32:08.087 回答
0

也许使用 css 类,您可以使整个导航超出视口的高度。height: 105vh;. 或者您可以完全禁用滚动条。

于 2020-08-20T21:34:30.303 回答