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

Posted 2023-03-13

【中文标题】如何更改 Angular Material select 中的滚动条样式？

【英文标题】：How to change the scrollbar styles in Angular Material select?

【发布时间】：2019-01-07 16:29:25

【问题描述】：

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

实现了以下演示。

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

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

Example

【参考方案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，您可以看到它的样式。

【讨论】：

它适用于 chrome，但不适用于 Firefox 和 Edge，因为我升级到 Angular + Material 6。有什么想法吗？谢谢

因为它是用于 chrome 的。 -_- 希望你注意到-webkit- 前缀。 ^_^

美丽。非常感谢。

只有当我把它写在根 css 文件中时它才有效。在组件 css 文件中写入时它不起作用。我可以在开发工具中看到 css。有什么想法吗？

完美。有人给这家伙一枚奖章。

【参考方案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>

这将起到隐藏本机滚动条的作用

【讨论】：

很抱歉，请问您在哪里有演示？我无法让它在 Angular 中工作。

这里是示例 stackblitz.com/edit/angular-t2czkp，但有时它在 stackblitz 上工作，有时不是。但我在多个项目中使用它并且运行良好

【参考方案3】：

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

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


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

【讨论】：

这对我有用，我在“webkit-scrollbar”中使用“display:none”来完全隐藏滚动条。所以滚动条不再可见，滚动工作完美。

【参考方案4】：

因为，当您使用 Angular 时，一个通用属性将在 DOM 中呈现，例如 ng-content，它会覆盖您用 CSS 编写的类属性，所以试试这段代码，这将消除在应用程序中使用的原生 Angular 样式。

转到组件，

import ViewEncapsulation from '@angular/core';

然后

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

然后您的样式将被浏览器采用。