1. はじめに
このセクションは規範的ではありません。
このCSSモジュールは、スクロールバーの視覚的なスタイリングに影響を与えるプロパティを導入します。 色（scrollbar-color）や太さ（scrollbar-width）などが含まれます。
1.1. 対象範囲
CSS Scrollbars Moduleは、スクロールバーコントロール自体のスタイリング専用です。 例えば、レベル1では色や幅を指定できますが、レイアウトやコンテンツがスクロール可能かどうかは対象外です。 レイアウトへの影響やスクロール可能性については、CSS Overflow Moduleで定義されています。
文書化されたユースケースに基づき、 本モジュールが解決を目指すスクロールバーに関する主なユースケースは3つあります：
- スクロールバーの色をWebアプリケーションのUIに合わせて調整する。
- スクロール領域が小さい場合、より細いスクロールバーを使用する。
- UAが提供するスクロールバーを非表示にし、 スクロール用のカスタムインターフェイスを提供することで、 他のスクロール可能性は維持しつつ独自UIを実現する。
1.1.1. 対象外
スクロールバーの内部構造、レイアウト、構成、 そして色の精密な制御は対象外です。 これは、プラットフォームごとにスクロールバーの構造やスタイリング慣習が異なり、 OSもより良いユーザー体験のためにスクロールバーのデザインを進化させ続けているためです。 スクロールバーの特定部分を選択する疑似要素などは検討されたものの、採用されませんでした。 このような細かな制御は制作者にとって魅力的ですが、 部品の配置や存在自体がプラットフォームによって異なるため、信頼できません。 過度な制御を許すと、一部プラットフォームでは完璧な結果が得られますが、 他のプラットフォームでは表示が崩れる原因となります。
注: スクロールバー関連の ::-webkit- 接頭辞付き疑似要素をWebに公開することは、
CSS作業グループおよびWebkit双方が誤りだと考えています。
1.2. 値の定義
本仕様は、CSS2のプロパティ定義規則および値定義構文（[CSS-VALUES-3]）に従います。 この仕様で定義されていない値型はCSS Values & Units [CSS-VALUES-3]で定義されています。 他のCSSモジュールと組み合わせることで、これらの値型の定義が拡張される場合があります。
プロパティごとの固有値以外にも、 本仕様で定義されるすべてのプロパティはCSS全域キーワードも値として受け付けます。 可読性のため、ここでは明示的に繰り返していません。
2. スクロールバーの色: scrollbar-color プロパティ
| 名前: | scrollbar-color |
|---|---|
| 値: | auto | <color>{2} |
| 初期値: | auto |
| 対象: | スクロールコンテナ |
| 継承: | はい |
| パーセンテージ: | 該当なし |
| 算出値: | 指定されたキーワードまたは2つの算出色 |
| 正規順序: | 文法による |
| アニメーション型: | 算出値による |
このプロパティは要素のスクロールバーの色を設定できます。
UAはルート要素に設定されたscrollbar-color値をビューポートに適用しなければなりません。
注: overflow （およびoverflow-*）プロパティとは異なり、 HTML body要素に設定されたscrollbar-color値はビューポートには伝わりません。
- auto
- ユーザーエージェントがスクロールバーの色を決定します。 プラットフォームの慣習に従うべきですが、color-schemeやその他のコンテキスト情報に応じて ページに適した色に調整しても構いません。
- <color>
- 1番目の色がスクロールバーのthumbに、2番目の色がtrackに適用されます。
詳細：
trackはスクロールバーの背景部分を指し、 通常スクロール位置に関係なく固定されています。
thumbはスクロールバーの可動部分で、 通常trackの上に浮かんで表示されます。
このプロパティがauto以外に算出された場合、 実装はデフォルトのプラットフォームUIレンダリングよりも単純なスクロールバーをレンダリングし、 指定された色で着色しても構いません。
注: ネイティブスクロールバーの構造やネイティブツールキットの制限などで UAが色をカスタマイズできない場合があります。 この場合、UAは色付け可能な異なる構造のスクロールバーに置き換えることができます。
（注: 各部品名称を示す図を追加予定 - http://www.howtocreate.co.uk/tutorials/scrlbar.html など）
（注: ページスタイリングに合わせて色付けされたスクロールバーの例を追加予定。対応ブラウザでのPNG画像など）
実装は、該当部分がプラットフォームに存在しない場合は指定された色を無視しても構いません。
scrollbar-colorプロパティで特定の色を指定する場合、 制作者は指定色同士のコントラストが十分か確認してください。 キーワード値の場合、UAは十分なコントラストを持つ色を使用するべきです。 WCAG 2.1 SC 1.4.11 非テキストコントラスト [WCAG21]を参照。 UAは、ユーザーの明示的な設定（例えば常に特定のスクロールバー色やシステムデフォルトの使用）に基づき これらのコントラスト要件を無視しても構いません。
注: ユーザーがスクロールバーを操作（例: ホバーやアクティブ化）した際、 実装はどの色がどの部品に適用されるかを変更しても構いません。
注: IEは各スクロールバー色プロパティのデフォルトとして システムカラー名を使用しています。 関連 Issue 1956も参照。
以下の例（https://www.w3.org/Style/Examples/007/scrollbars.en.htmlより引用）は、 IEでスクロールバーの色をリセットします。
html {
scrollbar-color: ThreeDFace Scrollbar;
}3. スクロールバーの太さ: scrollbar-width プロパティ
| 名前: | scrollbar-width |
|---|---|
| 値: | auto | thin | none |
| 初期値: | auto |
| 対象: | スクロールコンテナ |
| 継承: | いいえ |
| パーセンテージ: | 該当なし |
| 算出値: | 指定されたキーワード |
| 正規順序: | 文法による |
| アニメーション型: | 算出値による |
このプロパティは要素のスクロールバーの太さを指定できます。
スクロールバーはページ操作に不可欠なUI機構です。 OSはこうしたコントロールの一貫性を重視し、慣れによる使いやすさを高めます。 また、ユーザーはOSやUAの設定でスクロールバーなどUI部品の外観を調整できます。
特定のUX目的でこのプロパティを使う場合は適切ですが、 それ以外ではユーザー設定を上書きしないようにしてください。
- auto
-
実装はデフォルトのスクロールバー幅を使用しなければなりません。
注: ほとんどのシステムでは、これは従来のやや幅広なスクロールバーに相当します。 ただし、OSやUAの設定によってデフォルトがより幅広や細いスクロールバーになることもあります。
- thin
-
実装はautoより細いスクロールバーを使用するべきです。
これはプラットフォームが提供する細いスクロールバーのバリエーションや、
デフォルトより細いカスタムスクロールバーなどを意味します。
ただし、スクロールバーは十分な操作性を持つ幅でなければなりません。
（実装者はWCAG 2.1 SC 2.5.5 ターゲットサイズ [WCAG21]を参照してもよいでしょう）
注: ユーザーエージェントは細いスクロールバーの操作性を確保するため、様々な工夫が可能です。 例えば、オーバーレイスクロールバーの場合、 ユーザーが操作しようとした際に動的にスクロールバーを拡大することができます。 タッチスクリーン搭載デバイスのUAは、視覚的に小さいターゲットへのタップ解釈を調整することもできます。
ユーザーがUAやOS設定で細いスクロールバーに不快感を示した場合など、 UAはこの値を無視しautoとして扱っても構いません。 （UAはこのような設定を提供することが推奨されます。）
注: 一部プラットフォームではデフォルトが非常に細いスクロールバーであり、 それ以上細くできない場合もあります。 その場合、この値はautoとして動作します。
- none
-
実装はスクロールバーを表示しないようにしなければなりませんが、
他の手段による要素のスクロール可能性には影響しません。
この値を使うことで、マウスのみのユーザーがスクロールできなくなる可能性があります。 制作者はスクロールホイールのないマウスユーザーでも隠れたコンテンツにアクセスできるよう配慮してください。noneを使用する制作者は、 スクロール可能・コンテンツがさらにあることが分かる代替・同等の視覚的ヒントを提供してください。
注: 要素をプログラム的にのみスクロールさせ、 ユーザーが直接操作しない場合は、 overflow: hiddenをscrollbar-width: noneの代わりに使ってください。
* { scrollbar-width : auto !important; } これにより、制作者のスタイルに関係なく、すべてのスクロールバーがOS・UA設定通りのサイズになります。
UAはルート要素に設定されたscrollbar-width値をビューポートに適用しなければなりません。
注: overflowプロパティ（およびそのロングハンド）とは異なり、
HTML
body
要素に設定されたscrollbar-width値はビューポートには伝播しません。
注: この仕様はスクロールバーの正確な位置や形状、 フェードイン・アウトやスライドなどのアニメーションも定義しません。
付録A. 謝辞
この付録は規範的ではありません。
ユースケースの検討、試作、実装、フィードバックに対し Tab Atkins 氏および Xidorn Quan 氏に感謝します。 アクセシビリティのレビューと貢献（#3315）については Patrick H. Lauke 氏に感謝します。
付録B. 変更履歴
この付録は規範的ではありません。
2021-12-02 作業草案以降の変更
-
CR用のひな形変更
2021-08-05 作業草案からの変更
-
細いスクロールバーのアクセシビリティに関して「should」を「must」に変更（Issue 6675参照）
2018-09-25 初公開作業草案からの変更
- #6538: light と dark の値を scrollbar-color から削除し、UAが auto を color-scheme や他のコンテキスト情報に基づいて調整できるようにした。
- #3237: scrollbar-color の算出値を「指定キーワードまたは2つの算出色」に変更。
- #4693: 対象範囲を明確化：スクロールバーコントロール自体のスタイリングのみ、レイアウトやスクロール可能性は含まない。
- #3315: scrollbar-color と scrollbar-width のアクセシビリティ考慮事項を追加・更新。
付録C. セキュリティおよびプライバシーの考慮事項
この付録は規範的ではありません。
セキュリティに関する考慮事項
この仕様に関して、特にセキュリティ上の懸念は特定されていません。
プライバシーに関する考慮事項
この仕様に関して、特にプライバシー上の懸念は特定されていません。
自己レビュー質問票
-
この仕様は個人識別情報を扱いますか？
いいえ。
-
この仕様は高価値データを扱いますか？
いいえ。
-
この仕様は、ブラウジングセッション間で永続するオリジンの新しい状態を導入しますか？
いいえ。
-
この仕様は、ウェブに永続的なクロスオリジン状態を公開しますか？
いいえ。
-
この仕様は、現在アクセスできない他のデータをオリジンに公開しますか？
いいえ。
-
この仕様は新しいスクリプト実行・ロード機構を有効にしますか？
いいえ。
-
この仕様はオリジンにユーザーの位置情報へのアクセスを許可しますか？
いいえ。
-
この仕様はオリジンにユーザー端末のセンサーへのアクセスを許可しますか？
いいえ。
-
この仕様はオリジンにユーザーのローカル計算環境の側面へのアクセスを許可しますか？
いいえ。
-
この仕様はオリジンに他のデバイスへのアクセスを許可しますか？
いいえ。
-
この仕様はオリジンにユーザーエージェントのネイティブUIの一部制御を許可しますか？
はい。scrollbar-* プロパティにより、ページはユーザーエージェントのネイティブUI（ウィンドウや埋め込みフレーム、ページ内のスクロールバーなど）の色や幅を変更できます。
-
この仕様はウェブに一時的な識別子を公開しますか？
いいえ。
-
この仕様はファーストパーティとサードパーティのコンテキストで動作が異なりますか？
いいえ。
-
この仕様はユーザーエージェントの「シークレットモード」でどのように動作するべきですか？
通常と変わりません。
-
この仕様はユーザーのローカルデバイスにデータを永続化しますか？
いいえ。
-
この仕様には「セキュリティに関する考慮事項」と「プライバシーに関する考慮事項」セクションがありますか？
はい。
-
この仕様はデフォルトのセキュリティ特性をダウングレードすることを許可しますか？
いいえ。
付録D. アクセシビリティに関する考慮事項
この付録は規範的ではありません。
このようなケースで本プロパティを使うことは、 制作者がスクリプトや独自拡張で細いスクロールバーを自作するよりも望ましく、 ユーザーは上書きする機会を得ることができます。
ユーザースタイルシートによる上書きも可能であり、 さらにユーザーエージェントは細いスクロールバーの使用を望まないユーザーのための設定を公開することが推奨されます。
CSS作業グループは、通常よりも幅広なスクロールバーが必要なユーザーのニーズも認識しています。 OSやユーザーエージェントはそのような希望を表明できる手段を提供でき、CSSはその選択を尊重します。