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

皮库曼

求救!我已经尝试了许多解决方案来自定义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的解决方案。谢谢

Swapnil Sourabh

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

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

如果这样不起作用,则尝试::ng-deep在类名之前添加开头。

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

具有自定义滚动条的jQuery选择框(roblaplaca)不起作用

来自分类Dev

jQuery Colorbox和自定义滚动条

来自分类Dev

自定义滚动条箭头

来自分类Dev

自定义滚动条箭头

来自分类Dev

firefox-自定义滚动条

来自分类Dev

自定义Jtable滚动条

来自分类Dev

Textarea和自定义滚动条-jQuery自定义内容滚动条

来自分类Dev

高图滚动条不起作用

来自分类Dev

C#禁用Windows滚动条但启用自定义滚动条

来自分类Dev

如何自定义Apple Watch垂直滚动条

来自分类Dev

滚动条在JPane内的JScrollPanel上不起作用

来自分类Dev

完美的滚动条不起作用

来自分类Dev

为什么我的Tkinter滚动条不起作用?

来自分类Dev

scrollarea中的滚动条不起作用

来自分类Dev

Textarea和自定义滚动条-jQuery自定义内容滚动条

来自分类Dev

镀铬的自定义滚动条

来自分类Dev

水平滚动条不起作用asp.net

来自分类Dev

jQuery滚动条不起作用

来自分类Dev

滚动条在Java中不起作用

来自分类Dev

自定义滚动条样式,隐藏滚动条,除非滚动

来自分类Dev

咒语滚动条不起作用

来自分类Dev

Python Tkinter滚动条不起作用

来自分类Dev

Tkinter滚动条不起作用

来自分类Dev

从idiotWu反应光滑的滚动条不起作用?

来自分类Dev

为什么我的div滚动条不起作用?

来自分类Dev

tkinter:滚动条出现但不起作用

来自分类Dev

隐藏滚动条在 Mozilla Firefox 中不起作用

来自分类Dev

滚动条不起作用 - Selenium Webdriver

来自分类Dev

约束布局中的滚动条不起作用