CSS3

：

プロパティ

：

scrollbar-color

　編集：2022.07.05 by T.A.

[Edge]⛌。→●、mdn

スクロールバーの色。

名前	`scrollbar-color`
値	auto \| dark \| light \| <color>{2}
初期値	auto
適用対象	overflow が適用されるボックス
継承	される
百分率	受容しない
算出値	指定されたキーワード／2 個の算出色
正準的順序	文法に従う
アニメーション型	算出値の型による

このプロパティは、要素のスクロールバーの色を設定することを、作者に許容する。

ユーザーエージェントは、根要素に設定された scrollbar-color 値を表示域に適用するものとする。

注記： overflow（および overflow-＊）プロパティと違って、HTML <BODY> 要素上に設定された scrollbar-color 値は、表示域へは伝播されない。

auto

スクロールバー用の既定のプラットフォーム描画。

<TEXTAREA rows=5 style="
 scrollbar-color:auto;
">あいうえおか
</TEXTAREA>

dark

暗いスクロールバーを示す ― それは［プラットフォームから供されるスクロールバーの暗い変種、暗い色を伴うカスタムスクロールバー］のどちらにもなり得る。

【カスタムスクロールバーが何を意味するのか、この仕様では特に言及されていない。単に、［プラットフォームから供されるものでもユーザーエージェントが既定で供するものでもないスクロールバー］を意味すると見受けられる ― それを超える解釈は、この仕様のみからは得られない。】

<TEXTAREA rows=5 style="
 scrollbar-color:dark;
">あいうえおか
</TEXTAREA>

light

明るいスクロールバーを示す ― それは［プラットフォームから供されるスクロールバーの明るい変種、明るい色を伴うカスタムスクロールバー］のどちらにもなり得る。

<TEXTAREA rows=5 style="
 scrollbar-color:light;
">あいうえおか
</TEXTAREA>

<color>{2} ○

1 個目の色をスクロールバーのつまみに適用し、2 個目の色をスクロールバーの筋に適用する。

筋とは、スクロールバーの背景を指す ― それは、一般に、スクロールしている位置に関わらず固定される。

つまみとは、スクロールバー上の動かせる部位を指す ― それは、通例的に、筋に沿って浮動する。

<TEXTAREA rows=5 style="
 scrollbar-color:red;
">あいうえおか
</TEXTAREA>

このプロパティが auto 以外の値に算出される場合、実装は、既定のプラットフォームユーザーインタフェース描画より単純なスクロールバーを描画して、それに則って色付けてもよい。

課題：各部に名前を付与した図式を追加する ― http://www.howtocreate.co.uk/tutorials/scrlbar.html の様な。

課題：ページのスタイルに合致するような、色付けられたスクロールバーを伴う要素の例を追加する ― 現時点でそれをサポートするブラウザによる画像を伴わせて。

実装は、下層のプラットフォームに対応する部位が存在しない場合には、どの色も無視してよい。

作者は、scrollbar-color プロパティに特定の色値を利用するときは、［指定した色どうしのコントラストが十分になる］ことを確保するべきである。ユーザーエージェントは、キーワード値に対しては［自身が利用する色どうしのコントラストが十分になる］ことを確保するべきである。ユーザーエージェントは、値［light／dark］用の実際の色値が、要素の背景とのコントラストを十分に供すること確保するべきである（すなわち、［light／dark］は、背景が［明るいとき／暗いとき］でも常に十分なコントラストを与えるべきである）。WCAG 2.1 § SC 1.4.11 Non-text Contrast（非テキストのコントラスト）[WCAG21] を見よ。ユーザーエージェントは、明示的な利用者選好に基づいて、これらのコントラスト要件を無視してもよい（例えば、利用者が環境設定において［常にある特定のスクロールバー色を確保する／システム既定のスクロールバーの利用する］ことを選んだとき）。

注記：利用者がスクロールバーとやりとりするとき（例： hover する／作動化するなどにより）、実装はスクロールバーを成すどの部位にどのスクロールバー色を適用するか改めてもよい。

注記： IE は、各スクロールバー色プロパティの既定として有名システム色【システム色（非推奨にされたものも含む）】を利用する。関係する課題は課題 #1956 を見よ。

次の例は、IE においてスクロールバー色を設定し直す（この例は https://www.w3.org/Style/Examples/007/scrollbars.en.html から導出されている）：

html { 
    scrollbar-color: ThreeDFace Scrollbar;
}

CSS3

プロパティ

scrollbar-color

関連

テスト

スクリプト：

スクリプト：