捲軸樣式

使用 scrollbar-widthscrollbar-color 屬性設定捲軸的樣式。

簡介

自 Chrome 2 版起,您可以使用 ::-webkit-scrollbar-* 虛擬元素設定捲軸的樣式。這個方法適用於 Chrome 和 Safari,但 CSS 工作小組並未標準化。

標準化的例子是 scrollbar-widthscrollbar-color 屬性,這是 CSS 捲軸樣式模組層級 1 規格的一部分。這些屬性自 Chrome 121 起開始支援。

瀏覽器支援

  • Chrome:121。
  • Edge:121。
  • Firefox:64。
  • Safari:不支援。

資料來源

捲軸指南

捲軸剖析

捲軸至少要包含軌道和指標。軌跡是指拇指可以移動的區域。歷程代表整個捲動距離。拇指代表可捲動區域內的目前位置。捲動時,軌跡會在軌跡內移動。此外,拇指通常可以拖曳。

但捲軸可包含比拇指和軌跡以外的部分。舉例來說,捲軸可能包含一或多個按鈕,用於增加或減少捲動偏移。捲軸的組成部分取決於基礎作業系統。

插圖:組成捲軸的各個部分。
插圖:組成捲軸的各個部分。左圖是最小的捲軸,只有軌道和指標。右側按鈕也有按鈕。

傳統版和重疊捲軸

在瞭解如何為捲軸設定樣式前,請務必先瞭解兩種捲軸之間的區別。

重疊捲軸

重疊捲軸是顯示在其下方內容的浮動捲軸。這些預設不會顯示,只有在使用者主動捲動的情況下才會顯示。為了保持內容底下顯示的內容,通常會以半透明的形式顯示,但作業系統是由作業系統自行決定。與他們互動時,大小可能會有所不同。

瀏覽器的插圖和重疊捲軸。
瀏覽器的插圖和重疊捲軸。捲軸會疊加在內容上;拇指完全透明。

傳統捲軸

傳統捲軸是放在專用的捲軸溝槽中的捲軸。捲軸溝槽是內框線與外部邊框間距邊緣之間的空間。這些捲軸通常為不透明 (而非透明),會在周圍的內容騰出一定空間。

插圖:瀏覽器顯示傳統捲軸。
插圖:瀏覽器顯示傳統捲軸。捲軸應位於其專屬區域中的內容旁邊;使用重疊捲軸時,內容的可用寬度會縮小,並與可用寬度相較。

scrollbar-colorscrollbar-width 屬性

使用 scrollbar-color 提供捲軸顏色

scrollbar-color 屬性可讓您變更捲軸的色彩配置。此屬性接受兩個 <color> 值。第一個 <color> 值決定指標顏色,第二個值則決定曲目要使用的顏色。

.scroller {
  scrollbar-color: hotpink blue;
}

在預設情況下,使用重疊捲軸時,軌跡的顏色不會產生任何作用。不過,只要將滑鼠遊標移到捲軸上,系統就會顯示軌跡。

示範:設定捲軸樣式:scrollbar-color

如要使用作業系統提供的預設算繪模式,請將值設為 auto

使用 scrollbar-width 變更捲軸的大小

scrollbar-width 屬性可讓您選擇較小的捲軸,甚至在不影響捲動性的情況下完全隱藏捲軸。

可接受的值為 autothinnone

  • auto:平台提供的預設捲軸寬度。
  • thin:平台提供的精簡捲軸變化版本,或比預設平台捲軸更窄的自訂捲軸。
  • none:有效隱藏捲軸。不過,元素仍可捲動瀏覽。

您無法使用 <length> (例如 16px) 做為 scrollbar-width 的值。

.scroller {
  scrollbar-width: thin;
}

使用重疊捲軸時,只有在您主動捲動可捲動區域時,系統才會繪製拇指。

示範:設定捲軸樣式:scrollbar-width

支援舊版瀏覽器

如要配合不支援 scrollbar-colorscrollbar-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-scrollbarwidthheight 時,系統一律會顯示重疊捲軸,有效將其轉換成傳統捲軸。

為保留視覺效果,您可以選擇只在將滑鼠遊標懸停在捲動器上時變更色彩。

.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-* 顏色