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