捲軸樣式

使用 scrollbar-width 和 scrollbar-color 屬性設定捲軸樣式。

Bramus

簡介

從 Chrome 第 2 版開始，您可以使用::-webkit-scrollbar-*虛擬元素設定捲軸樣式。這個方法在 Chrome 和 Safari 中運作正常，但 CSS 工作群組從未將其標準化。

標準化的是 scrollbar-width 和 scrollbar-color 屬性，屬於 CSS 捲軸樣式模組第 1 級規格。Chrome 121 以上版本支援這些屬性。

Browser Support

  • Chrome: 121.
  • Edge: 121.
  • Firefox: 64.
  • Safari: 26.2.

Source

捲軸入門

捲軸剖析

捲軸至少會包含軌道和滑桿。軌跡是拇指可移動的區域。軌道代表整個捲動距離。拇指代表可捲動區域內的目前位置。捲動時，滑桿會在軌道內移動。拇指通常也可以拖曳。

不過，捲軸可能不只包含滑桿和軌道，舉例來說，捲軸可能有一或多個按鈕，可增加或減少捲動偏移量。捲軸的組成部分取決於基礎作業系統。

插圖：組成捲軸的各個部分。
插圖：組成捲軸的各個部分。左側的插圖是只有軌道和指標的最基本捲軸。右側的按鈕也一樣。

傳統和疊加捲軸

在瞭解如何設定捲軸樣式之前，請務必先分清楚兩種捲軸的差異。

重疊捲軸

重疊捲軸是顯示在下方內容頂端的浮動捲軸。系統預設不會顯示這些指標，只會在您捲動時顯示。為確保底下的內容可見，這類通知通常會半透明顯示，但實際情況取決於作業系統。與這些元素互動時，大小也可能會有所不同。

插圖：瀏覽器和重疊捲軸。
瀏覽器插圖，顯示重疊捲軸。捲軸會覆蓋內容，且控點為半透明。

傳統捲軸

傳統捲軸是放置在專用捲軸溝槽中的捲軸。捲軸溝槽是內邊界和外邊框間距之間的空間。這些捲軸通常是不透明 (非透明)，且會佔用相鄰內容的部分空間。

插圖：瀏覽器和傳統捲軸。
插圖：瀏覽器，內含傳統捲軸。捲軸會顯示在專屬區域的內容旁，與使用疊加捲軸時相比，內容的可用寬度會縮小。

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 設為 ::-webkit-scrollbar，系統一律會顯示疊加捲軸，將其有效轉換為傳統捲軸。

如要維持錯覺效果，可以選擇只在游標懸停在捲軸上時變更顏色。

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