求救!我已经尝试了许多解决方案来自定义mat-sidenav(用角形材料制成的侧抽屉/导航栏),但是无法正常工作。它仅在从chrome dev-tools删除不存在的div上的最重要的“ over-flow:auto”,无法通过css应用的更改,类的溢出属性始终变为auto时起作用。我的模板
<mat-sidenav-container class="sidenav-container" (backdropClick)="drawer.close()">
<mat-sidenav #drawer id="drawer" mode="side" class="sidenav" fixedInViewport
(keydown.escape)="drawer.close()">
<mat-toolbar>
....
</mat-toolbar>
<mat-nav-list>
...... //scrollable content
</mat-nav-list>
</mat-sidenav>
<mat-sidenav-content>
<mat-toolbar color="none">
......
</mat-toolbar>
</mat-sidenav-content>
</mat-sidenav-container>
的CSS
#drawer::-webkit-scrollbar {
width: 10px;
}
#drawer::-webkit-scrollbar-track {
background: rgb(0, 12, 8);
}
#drawer::-webkit-scrollbar-thumb {
background: #262626;
}
#drawer::-webkit-scrollbar-thumb:hover {
background: #555;
}
来自Chrome的开发工具的屏幕快照,该屏幕位于模板之外的其他div中,如果我在开发工具中删除了该div的overflow:auto属性,则自定义滚动条将起作用
将不胜感激任何帮助。需要删除屏幕快照div的“溢出:自动”属性。欢迎使用其他任何定制mat-sidenav的解决方案。谢谢
如果要覆盖css属性,请将其添加到css文件中:
.mat-drawer-inner-container {
overflow: hidden !important;
}
如果这样不起作用,则尝试::ng-deep
在类名之前添加开头。
PS:我将溢出用作隐藏的内容,您可以根据需要进行更改。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句