捲軸樣式

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

Bramus

簡介

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

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

捲軸指南

捲軸剖析

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

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

傳統版和重疊捲軸

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

重疊捲軸

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

傳統捲軸

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

scrollbar-color 和 scrollbar-width 屬性

使用 scrollbar-color 提供捲軸顏色

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

.scroller {
  scrollbar-color: hotpink blue;
}

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

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

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

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

可接受的值為 auto、thin 和 none。

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

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

.scroller {
  scrollbar-width: thin;
}

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

支援舊版瀏覽器

如要配合不支援 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);
    }
}

請注意，設定 ::-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. */
}