捲軸樣式

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

Bramus

引言

自 Chrome 第 2 版起，您可以使用 ::-webkit-scrollbar-* 虛擬元素設定捲軸樣式。這種方法在 Chrome 和 Safari 中雖然有效，但 CSS Working Group 並未將其標準化。

標準化的項目包括 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. */
}