Nous avons besoin d’aide pour changer la barre de défilement dans le composant Sélectionner du matériau angulaire.
La démo suivante a été implémentée.
https://stackblitz.com/angular/bxbvndrpogl?file=app%2Fselect-reset-example.ts
Cependant, j'ai besoin d'aide pour changer la largeur et le style de la barre de défilement.
Habituellement, la manière de personnaliser le parchemin est la suivante:
/* 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;
}
Vous ne pouvez pas inspecter directement le parchemin à partir des outils de développement, mais vous pouvez en voir le style si vous inspectez la div qui a la propriété overflow
avec la valeur scroll;
.
J'espère que je ne suis pas en retard, j'ai eu un problème similaire avec la barre de défilement native.
La façon dont je résoudrais ce problème est d’utiliser Barre simple bibliothèque, puis je ferais directive et seulement envelopper
<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>
Cela fera le tour de cacher la barre de défilement native