如何在“角度材料选择”中更改滚动条样式？

Question

我们需要帮助来更改Angular Material中Select组件中的滚动条。

以下示例已实现。

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

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

我解决此问题的方法是使用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 3

@ Emily和Simple Bar的解决方案在Angular 9和Angular Material中都可以正常工作。真的，谢谢！

我通过堆叠闪电战解决了他的问题。检查这里：

https://stackblitz.com/edit/angular-t2czkp-6vj8r3-simplebar

问候