Question

SOS ！！我已经尝试了许多解决方案来自定义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;
}

Screenshot from Chrome's dev tools of the additional div which is not in the template, if I remove the overflow:auto property of this div in dev tools, the custom scroll bar works

将非常感谢您的帮助。需要删除屏幕快照div的“溢出：自动”属性。欢迎使用其他任何定制mat-sidenav的解决方案。谢谢

Answer 1

如果要覆盖css属性，请将其添加到css文件中：

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

如果这不起作用，请尝试在类名之前的开头添加::ng-deep。

PS：我将溢出用作隐藏的内容，您可以根据需要进行更改。

角材料自定义滚动条不起作用

1 个答案: