如何在Angular Material选择器中更改滚动条样式？

Question

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

以下演示已经实现。

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

然而，我需要帮助来改变滚动条的宽度和样式。 示例

- Baskar

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

- Torjescu Sergiu

---

自从升级到Angular + Material 6后，它可以在Chrome上运行，但在Firefox和Edge上无法运行。有什么想法吗？谢谢。 - Yukun

美丽。非常感谢你。 - ScipioAfricanus

只有在根CSS文件中编写时才有效，在组件CSS文件中编写时无效。我可以在开发工具中看到CSS。有什么想法？ - Chandresh Mishra

太完美了！有人给这个家伙颁奖章吧。 - Pramesh Bajracharya

@ChandreshMishra 将代码粘贴到组件 CSS 文件的末尾，它就会起作用。 - ASANIAN

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

- Neha Jain

---

这对我很有效，我在 'webkit-scrollbar' 中使用 "display:none" 来完全隐藏滚动条。因此，滚动条不再可见，滚动功能完美运行。 - ManulMad

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>

这将隐藏原生滚动条的技巧。

- Uncharted

---

抱歉打扰，你有演示的地方吗？我在 Angular 中无法使其工作。 - etiennepeiniau

这是一个示例 https://stackblitz.com/edit/angular-t2czkp，但有时它在StackBlitz上可以运行，有时则不行。但我在多个项目中使用它，它正常工作。 - Uncharted

Answer 4

对我来说，上述方法无效。我使用了以下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);
}

- I.vignesh David

Answer 5

因为在使用Angular时，常见的属性如ng-content会在DOM中渲染，这将覆盖CSS中编写的类属性，因此请尝试使用以下代码，这将消除应用程序中使用的原生Angular样式。

前往组件，

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

那么

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

然后你的样式将被浏览器接受。

- Geraldo Soares