web-dev-qa-db-fra.com

Comment changer les styles de la barre de défilement dans Angular Material select?

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

 Mat-Select

Cependant, j'ai besoin d'aide pour changer la largeur et le style de la barre de défilement.

Exemple

angulartypescriptangular-material
4
Baskar

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

9
Torjescu Sergiu

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 

0
Emily