scrollbar-color
scrollbar-color CSS 屬性設定捲軸的軌道和滑塊的顏色。
軌道（track）是指捲軸的背景，它通常是固定的，與滾動位置無關。
滑塊（thumb）是指捲軸的可移動部分，它通常浮動在軌道上方。
當在文件的根元素上設定 scrollbar-color 值時，這些值會應用於視口捲軸。
語法
css
/* Keyword values */
scrollbar-color: auto;
/* <color> values */
scrollbar-color: rebeccapurple green; /* Two valid colors.
The first applies to the thumb of the scrollbar, the second to the track. */
/* Global values */
scrollbar-color: inherit;
scrollbar-color: initial;
scrollbar-color: revert;
scrollbar-color: revert-layer;
scrollbar-color: unset;
值
<scrollbar-color>-
定義捲軸的顏色。
auto在沒有其他相關捲軸顏色屬性的情況下，捲軸軌道部分的預設平臺渲染。 <color> <color>將第一個顏色應用於捲軸滑塊，第二個顏色應用於捲軸軌道。
注意： @media (forced-colors: active) 會將 scrollbar-color 設定為 auto。
無障礙
當使用帶有特定顏色值的 scrollbar-color 屬性時，作者應確保指定的顏色之間有足夠的對比度。對於關鍵字值，UA 應確保其使用的顏色有足夠的對比度。參見 WCAG 2.0 技術：G183：使用 3:1 的對比度。
正式定義
正式語法
scrollbar-color =
auto |
<color>{2}
示例
為溢位捲軸著色
CSS
css
.scroller {
width: 300px;
height: 100px;
overflow-y: scroll;
scrollbar-color: #000077 #bada55;
}
HTML
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 捲軸樣式模組級別 1 # scrollbar-color |
瀏覽器相容性
載入中…