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 草案 初回定義

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

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

ブラウザーの対応

scrollbar-width

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung 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 未対応 なし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

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
scrollbar-color
実験的
Chrome 未対応 なしEdge 未対応 なしFirefox 完全対応 64
補足
完全対応 64
補足
補足 On macOS, you need to set the General > Show scroll bars setting in System Preferences to "Always" for this property to have any effect.
完全対応 63
無効
無効 From version 63: this feature is behind the layout.css.scrollbar-color.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしFirefox Android 完全対応 64
完全対応 64
完全対応 63
無効
無効 From version 63: this feature is behind the layout.css.scrollbar-color.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし

凡例

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