如何在Angular Material select中更改滚动条样式？

Question

我们需要帮助来更改Angular Material中“选择”组件中的滚动条。

以下示例已实现。

https://stackblitz.com/angular/bxbvndrpogl?file=app%2Fselect-reset-example.ts

但是，我需要更改滚动条的宽度和样式的帮助。

Example

Answer 1

通常，自定义滚动条的方法是：

/* 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，则可以看到其样式。

Answer 2

更改对我有用的颜色和宽度-

::-webkit-scrollbar {
    width: 4px;
    overflow-y: scroll;
    background: grey;
    box-shadow: inset 0 0 4px #707070;
}

::-webkit-scrollbar-thumb {
    background: blue;
    border-radius: 10px;
}

Answer 3

我希望我不晚，本机滚动条也有类似的问题。

我要解决此问题的方法是使用Simple bar 库，然后我将发出指令并只包装

 <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>

这将实现隐藏本机滚动条的技巧

Answer 4

因为，当您使用Angular时，一个通用属性将以ng-content之类的形式呈现在DOM中，它将覆盖用CSS编写的类属性，因此请尝试使用此代码，这将消除在应用程序中使用的本地Angular样式。

转到组件，

import {ViewEncapsulation} from '@angular/core';

然后

@Component({
.....
.....
encapsulation: ViewEncapsulation.None
})

然后您的样式将由浏览器获取。