使用 scrollbar-width
和 scrollbar-color
屬性設定捲軸的樣式。
簡介
自 Chrome 2 版起,您可以使用 ::-webkit-scrollbar-*
虛擬元素設定捲軸的樣式。這個方法適用於 Chrome 和 Safari,但 CSS 工作小組並未標準化。
標準化的例子是 scrollbar-width
和 scrollbar-color
屬性,這是 CSS 捲軸樣式模組層級 1 規格的一部分。這些屬性自 Chrome 121 起開始支援。
捲軸指南
捲軸剖析
捲軸至少要包含軌道和指標。軌跡是指拇指可以移動的區域。歷程代表整個捲動距離。拇指代表可捲動區域內的目前位置。捲動時,軌跡會在軌跡內移動。此外,拇指通常可以拖曳。
但捲軸可包含比拇指和軌跡以外的部分。舉例來說,捲軸可能包含一或多個按鈕,用於增加或減少捲動偏移。捲軸的組成部分取決於基礎作業系統。
![插圖:組成捲軸的各個部分。](https://developer.chrome.google.cn/static/docs/css-ui/scrollbar-styling/image/scrollbar-props-1.png?authuser=19&hl=zh-tw)
傳統版和重疊捲軸
在瞭解如何為捲軸設定樣式前,請務必先瞭解兩種捲軸之間的區別。
重疊捲軸
重疊捲軸是顯示在其下方內容的浮動捲軸。這些預設不會顯示,只有在使用者主動捲動的情況下才會顯示。為了保持內容底下顯示的內容,通常會以半透明的形式顯示,但作業系統是由作業系統自行決定。與他們互動時,大小可能會有所不同。
![瀏覽器的插圖和重疊捲軸。](https://developer.chrome.google.cn/static/docs/css-ui/scrollbar-styling/image/scrollbar-props-2.png?authuser=19&hl=zh-tw)
傳統捲軸
傳統捲軸是放在專用的捲軸溝槽中的捲軸。捲軸溝槽是內框線與外部邊框間距邊緣之間的空間。這些捲軸通常為不透明 (而非透明),會在周圍的內容騰出一定空間。
![插圖:瀏覽器顯示傳統捲軸。](https://developer.chrome.google.cn/static/docs/css-ui/scrollbar-styling/image/scrollbar-props-3.png?authuser=19&hl=zh-tw)
scrollbar-color
和 scrollbar-width
屬性
使用 scrollbar-color
提供捲軸顏色
scrollbar-color
屬性可讓您變更捲軸的色彩配置。此屬性接受兩個 <color>
值。第一個 <color>
值決定指標顏色,第二個值則決定曲目要使用的顏色。
.scroller {
scrollbar-color: hotpink blue;
}
在預設情況下,使用重疊捲軸時,軌跡的顏色不會產生任何作用。不過,只要將滑鼠遊標移到捲軸上,系統就會顯示軌跡。
scrollbar-color
如要使用作業系統提供的預設算繪模式,請將值設為 auto
。
使用 scrollbar-width
變更捲軸的大小
scrollbar-width
屬性可讓您選擇較小的捲軸,甚至在不影響捲動性的情況下完全隱藏捲軸。
可接受的值為 auto
、thin
和 none
。
auto
:平台提供的預設捲軸寬度。thin
:平台提供的精簡捲軸變化版本,或比預設平台捲軸更窄的自訂捲軸。none
:有效隱藏捲軸。不過,元素仍可捲動瀏覽。
您無法使用 <length>
(例如 16px
) 做為 scrollbar-width
的值。
.scroller {
scrollbar-width: thin;
}
使用重疊捲軸時,只有在您主動捲動可捲動區域時,系統才會繪製拇指。
scrollbar-width
支援舊版瀏覽器
如要配合不支援 scrollbar-color
和 scrollbar-width
的瀏覽器版本,您可以同時使用新的 scrollbar-*
和 ::-webkit-scrollbar-*
屬性。
.scroller {
--scrollbar-color-thumb: hotpink;
--scrollbar-color-track: blue;
--scrollbar-width: thin;
--scrollbar-width-legacy: 10px;
}
/* Modern browsers with `scrollbar-*` support */
@supports (scrollbar-width: auto) {
.scroller {
scrollbar-color: var(--scrollbar-color-thumb) var(--scrollbar-color-track);
scrollbar-width: var(--scrollbar-width);
}
}
/* Legacy browsers with `::-webkit-scrollbar-*` support */
@supports selector(::-webkit-scrollbar) {
.scroller::-webkit-scrollbar-thumb {
background: var(--scrollbar-color-thumb);
}
.scroller::-webkit-scrollbar-track {
background: var(--scrollbar-color-track);
}
.scroller::-webkit-scrollbar {
max-width: var(--scrollbar-width-legacy);
max-height: var(--scrollbar-width-legacy);
}
}
scrollbar-*
設定捲軸樣式,並改回 ::-webkit-scrollbar-*
請注意,設定 ::-webkit-scrollbar
的 width
或 height
時,系統一律會顯示重疊捲軸,有效將其轉換成傳統捲軸。
為保留視覺效果,您可以選擇只在將滑鼠遊標懸停在捲動器上時變更色彩。
.scroller::-webkit-scrollbar-thumb {
background: transparent;
}
.scroller::-webkit-scrollbar-track {
background: transparent;
}
.scroller:hover::-webkit-scrollbar-thumb {
background: var(--scrollbar-color-thumb);
}
.scroller:hover::-webkit-scrollbar-track {
background: var(--scrollbar-color-track);
}
.scroller:hover {
--fix: ; /* This custom property invalidates styles on hover, thereby enforcing a style recomputation. This is needed to work around a bug in Safari. */
}
scrollbar-*
設定捲軸樣式,並將備用設為 ::-webkit-scrollbar-*
,只在懸停時套用 ::-webkit-scrollbar-*
顏色