在默认行为中,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
. 如果我打开多个手风琴,滚动条就会出现,如果我关闭它,它就会消失。由于响应性,这会在中心内容中产生持续的移动。
如果我可以让滚动条始终可见,问题就解决了。