scrollbar-color
scrollbar-color は CSS のプロパティで、スクロールバーのトラックとつまみの色を設定します。
トラックはスクロールバーの背景を表し、一般的にスクロール位置にかかわらず固定されています。
つまみはスクロールバーの動く部分で、ふつうはトラックの上を動きます。
scrollbar-color の値がドキュメントのルート要素に設定されている場合、その値はビューポートのスクロールバーに適用されます。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 121 | 121 | 64 | 26.2 | 121 | 26.2 | |
auto | 121 | 121 | 64 | 26.2 | 121 | 26.2 |
基本構文
CSS
/* Specify scrollbar and track colors */
.dark-theme {
scrollbar-color: #6b7280 #1f2937;
}
/* "auto" uses the browser default */
.default-scroll {
scrollbar-color: auto;
}ライブデモ
実務での使いどころ
-
ダークモード対応
ダークテーマ時にスクロールバーの色もダークに合わせて統一感のあるUIを実現する。
注意点
- Safari 26.2未満では無効。段階的強化として利用する。
- 指定できるのはサムとトラックの2色のみ。細かなスタイリングには ::-webkit-scrollbar が必要だが非標準。
アクセシビリティ
- サムとトラックのコントラスト比を十分に確保し、スクロールバーが視認できるようにする。