CSS スクロールバー

これは実験的な機能です。本番で使用する前にブラウザー実装状況をチェックしてください。

CSS スクロールバー (CSS Scrollbars) は、2000年に Windows の IE 5.5 で導入され、廃止されたスクロールバーの色のプロパティを標準化するためのものです。

基本的な例

この例では、緑色のトラックと紫色のつまみを持った細いスクロールバーを使用してみました。

.scroller {
  width: 300px;
  height: 100px;
  overflow-y: scroll;
  scrollbar-color: rebeccapurple green;
  scrollbar-width: thin;
}

HTML

<div class="scroller">
Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi
welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.
Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette
tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato.
Dandelion cucumber earthnut pea peanut soko zucchini.
</div>

結果

リファレンス

CSS プロパティ

仕様書

仕様書	状態	備考
CSS Scrollbars Level 1	草案	初回定義

アクセシビリティの考慮事項

スクロールバーをカスタマイズする場合は、十分なコントラストがあることと、ヒット領域がタッチ入力を使っている人が操作できるだけ大きいかどうかを考慮してください。

Baseline Rules for Scrollbar Usability | Adrian Roselli

ブラウザーの対応

scrollbar-width

Update compatibility data on GitHub

	デスクトップ						モバイル
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Android 版 Chrome	Edge Mobile	Android 版 Firefox	Android 版 Opera	iOSのSafari	Samsung Internet
`scrollbar-width` 実験的	Chrome 未対応なし	Edge 未対応なし	Firefox 完全対応 64 完全対応 64 完全対応 63 無効無効 From version 63: this feature is behind the `layout.css.scrollbar-width.enabled` preference (needs to be set to `true`). To change preferences in Firefox, visit about:config.	IE 未対応なし	Opera 未対応なし	Safari 未対応なし	WebView Android 未対応なし	Chrome Android 未対応なし	Edge Mobile 未対応なし	Firefox Android 完全対応 64 完全対応 64 完全対応 63 無効無効 From version 63: this feature is behind the `layout.css.scrollbar-width.enabled` preference (needs to be set to `true`). To change preferences in Firefox, visit about:config.	Opera Android 未対応なし	Safari iOS 未対応なし	Samsung Internet Android 未対応なし

凡例

完全対応: 完全対応
未対応: 未対応
実験的。動作が変更される可能性があります。: 実験的。動作が変更される可能性があります。
ユーザーが明示的にこの機能を有効にしなければなりません。: ユーザーが明示的にこの機能を有効にしなければなりません。

scrollbar-color