滚动时始终可见实质性的导航

问题描述

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

我想要这样做是因为从滚动条中出现和消失的效果会触发响应并移动中心内容。 因此,每次我打开或关闭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-itemsaccordions。如果我打开多个手风琴,则会出现滚动条,如果我关闭它,则消失。由于响应能力,中央内容会不断移动。

enter image description here

enter image description here

如果我可以使滚动条始终可见,则问题已解决。

解决方法

暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!

如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@)