我们需要帮助修改Angular Material中Select组件的滚动条。
以下演示已经实现。
以下演示已经实现。
https://stackblitz.com/angular/bxbvndrpogl?file=app%2Fselect-reset-example.ts
然而,我需要帮助来改变滚动条的宽度和样式。 示例https://stackblitz.com/angular/bxbvndrpogl?file=app%2Fselect-reset-example.ts
然而,我需要帮助来改变滚动条的宽度和样式。 示例通常自定义滚动条的方法是:
/* width */
::-webkit-scrollbar {
width: 20px;
}
/* Track */
::-webkit-scrollbar-track {
box-shadow: inset 0 0 5px grey;
border-radius: 10px;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: red;
border-radius: 10px;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #b30000;
}
您无法直接从开发工具中检查滚动条,但是如果您检查具有overflow
属性且值为scroll;
的div,则可以查看其样式。
对我来说,改变颜色和宽度有用 -
::-webkit-scrollbar {
width: 4px;
overflow-y: scroll;
background: grey;
box-shadow: inset 0 0 4px #707070;
}
::-webkit-scrollbar-thumb {
background: blue;
border-radius: 10px;
}
<mat-select placeholder="State">
<div appSimpleBar>
<mat-option>None</mat-option>
<mat-option *ngFor="let state of states" [value]="state">{{state}}</mat-option>
</div>
</mat-select>
对我来说,上述方法无效。我使用了以下CSS样式
::ng-deep .mat-select-panel::-webkit-scrollbar {
-webkit-appearance: none;
}
::ng-deep .mat-select-panel::-webkit-scrollbar:vertical {
width: 11px;
background-color: rgb(233, 245, 233)
}
::ng-deep .mat-select-panel::-webkit-scrollbar-thumb {
border-radius: 8px;
border: 2px solid rgb(233, 245, 233) !important; /* should match background, can't be transparent */
background-color: rgba(0, 0, 0, .5);
}
import {ViewEncapsulation} from '@angular/core';
那么
@Component({
.....
.....
encapsulation: ViewEncapsulation.None
})