web-dev-qa-db-ja.com

Angular Material select？でスクロールバーのスタイルを変更するには？

SelectコンポーネントのスクロールバーをAngular Material。

次のデモが実装されました。

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

Mat-Select

ただし、スクロールバーの幅とスタイルを変更するには助けが必要です。

例

angulartypescriptangular-material
9
Baskar

通常、スクロールをカスタマイズする方法は次のとおりです。

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

開発ツールからスクロールを直接検査することはできませんが、scroll;値を含むoverflowプロパティを持つdivを検査すると、スクロールのスタイルを確認できます。

21
Torjescu Sergiu

私は遅くないことを願っています、私はネイティブのスクロールバーで同様の問題を抱えていました。

この問題を解決する方法は、 シンプルなバー ライブラリを使用することです。その後、ディレクティブを作成し、ラップするだけです。

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

これにより、ネイティブスクロールバーを非表示にすることができます。

3
Emily