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

scrollbar-width プロパティは、要素のスクロールバーが表示される時の最大の太さを設定することができます。

初期値auto
適用対象スクロールするボックス
継承なし
メディア視覚
計算値指定値
アニメーションの種類個別
正規順序構文通り

構文

/* キーワード値 */
scrollbar-width: auto;
scrollbar-width: thin;
scrollbar-width: none;

/* グローバル値 */
scrollbar-width: inherit;
scrollbar-width: initial;
scrollbar-width: unset;

<scrollbar-width>
スクロールバーの幅を、長さまたはキーワードのどちらかで定義します。キーワードが使用する場合は、以下の値のうちの一つでなければなりません。
auto プラットフォーム既定のスクロールバーの幅です。
thin プラットフォームが提供している細いスクロールバー、またはプラットフォーム既定のスクロールバーの幅よりも細いスクロールバーです。
none スクロールバーが表示されませんが、要素はスクロール可能です。

メモ: スクロールバーの幅に長さを指定すると、 scrollbar-width プロパティ自身が仕様書から削除されるリスクがあります。 (Issue 1958)

メモ: ユーザーエージェントは、ビューポートのルート要素に何らかの scrollbar-width の値を設定する必要があります。

形式文法

auto | thin | none

CSS

.scroller {
  width: 300px;
  height: 100px;
  overflow-y: scroll;
  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 Scrollbars Level 1
scrollbar-width の定義
草案 初回定義

ブラウザーの対応

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

凡例

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

ドキュメントのタグと貢献者

このページの貢献者: mdnwebdocs-bot, mfuji09
最終更新者: mdnwebdocs-bot,