代码之家 › 专栏 › 技术社区 › AJ-

子组件中mat列表内的角度样式滚动条

scrollbar angular-material angular

1

AJ- · 技术社区 · 7 年前

我无法将此子组件中的滚动条作为目标,因为我有一个 mat-list 以及2个具有规定高度和 overflow-y:auto

https://stackblitz.com/edit/angular-chtqjk-vdwwnd

在css文件的底部,你有我所有的尝试,目标是2个滚动条,找不到正确的选择器!

有人能启发我吗?谢谢您

1 回复 | 直到 7 年前

1

user184994 7 年前

以下操作似乎有效:

#visibilityContainer ::ng-deep ::-webkit-scrollbar {
  height: 4px;
  width: 4px;
}

#visibilityContainer ::ng-deep ::-webkit-scrollbar-track {
  background-color: rgba(0, 0, 0, 0.26) !important;
}

请注意 ::webkit-scrollbar-track 选择器必须与 #visibilityContainer 选择器,因为滚动条实际上不在该元素上。

Here is a fork of the StackBlitz

你需要确定你的风格 thumb

#visibilityContainer ::ng-deep ::-webkit-scrollbar-thumb {
    background: blue; 
}