it-swarm.com.de

So ändern Sie die Bildlaufleistenstile in Winkelmaterial auswählen?

Wir benötigen Hilfe beim Ändern der Bildlaufleiste in der Komponente aus Winkelmaterial auswählen.

Die folgende Demo wurde implementiert.

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

 Mat-Select

Ich brauche jedoch Hilfe beim Ändern der Breite und des Stils der Bildlaufleiste.

Beispiel

4
Baskar

Normalerweise können Sie die Bildlaufleiste anpassen:

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

Sie können die Bildlaufleiste nicht direkt von den dev-Werkzeugen aus überprüfen. Sie können jedoch das Styling des Bildlaufs sehen, wenn Sie das div mit der overflow -Eigenschaft und dem scroll;-Wert darin überprüfen. 

9
Torjescu Sergiu

Ich hoffe, ich komme nicht zu spät, ich hatte ein ähnliches Problem mit der nativen Bildlaufleiste. 

Die Art und Weise, wie ich dieses Problem lösen würde, ist die Verwendung von Simple bar library

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

Dadurch wird die native Bildlaufleiste ausgeblendet 

0
Emily