Материал sidenav с прокруткой всегда виден

По умолчанию полоса прокрутки 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. Если я открою более одного аккордеона, появится полоса прокрутки, если я ее закрою, она исчезнет. Это создает постоянные движения в центральном контенте из-за отзывчивости.

введите здесь описание изображения введите здесь описание изображения

Если я смогу сделать полосу прокрутки всегда видимой, проблема будет решена.


person Matheus Saraiva    schedule 20.08.2020    source источник


Ответы (2)


Возможно, с помощью класса CSS вы могли бы сделать так, чтобы вся навигация превышала высоту вашего окна просмотра. height: 105vh;. Или вы можете вообще отключить полосу прокрутки.

person Roy    schedule 20.08.2020

Компонент, отвечающий за полосу прокрутки sidenav, представляет собой среду выполнения, созданную div и имеющую класс mat-drawer-inner-container. Чтобы сделать полосу прокрутки всегда видимой, просто определите overflow-y: scroll! Important; для этого элемента. !important не очень хорошо видно в ангаре, но это был единственный способ, которым я его получил. В моем случае:

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

в styles.scss

person Matheus Saraiva    schedule 24.08.2020