CSS の scrollbar-color
プロパティは、スクロールバーのトラックとつまみの色を設定します。
トラックはスクロールバーの背景を表し、一般的にスクロール位置にかかわらず固定されています。
つまみはスクロールバーの動く部分で、ふつうはトラックの上を動きます。
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
初期値 | auto |
---|---|
適用対象 | スクロールするボックス |
継承 | あり |
計算値 | 指定通り |
アニメーションの種類 | 色 |
構文
/* キーワード値 */
scrollbar-color: auto;
scrollbar-color: dark;
scrollbar-color: light;
/* <color> 値 */
scrollbar-color: rebeccapurple green; /* 二つの有効な色。
一つ目はスクロールバーのつまみ、二つ目はトラックに適用される。 */
/* グローバル値 */
scrollbar-color: inherit;
scrollbar-color: initial;
scrollbar-color: unset;
値
<scrollbar-color>
- スクロールバーの色を定義します。
auto
他にスクロールバーに関する色のプロパティがない場合、スクロールバーの位置を表す既定の表示になります。 dark
暗い色のスクロールバーを示し、プラットフォームで提供している暗い色のスクロールバー化、暗い色のカスタムスクロールバーのどちらかになります。 light
明るい色のスクロールバーを示し、プラットフォームで提供している明るい色のスクロールバー化、明るい色のカスタムスクロールバーのどちらかになります。 <color> <color>
最初の色をスクロールバーのつまみに、二番目の色をスクロールバーのトラックに適用します。 メモ: ユーザーエージェントはビューポートのルート要素に、何らかの
scrollbar-color
の値を適用しなければなりません。
形式文法
auto | dark | light | <color>{2}ここで
<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>
ここで
<rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? )
<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]? ) | rgba( <number>{3} [ / <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? )
<hsl()> = hsl( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )
<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )ここで
<alpha-value> = <number> | <percentage>
<hue> = <number> | <angle>
例
CSS
.scroller {
width: 300px;
height: 100px;
overflow-y: scroll;
scrollbar-color: rebeccapurple green;
}
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>
結果
アクセシビリティの考慮事項
scrollbar-color
プロパティで色の値を指定して使用する場合、指定した色の間に十分なコントラストがあることを確認してください。キーワード値の場合、ユーザーエージェントは使用する色の間に十分なコントラストがあることを確認してください。 Techniques for WCAG 2.0: G183: Using a contrast ratio of 3:1 を参照してください。
仕様書
仕様書 | 状態 | 備考 |
---|---|---|
CSS Scrollbars Level 1 scrollbar-color の定義 |
草案 | 初回定義 |
ブラウザーの互換性
BCD tables only load in the browser