自訂捲軸的顏色或粗細

網頁功能： scrollbar-color scrollbar-width

您可以使用標準 CSS 屬性 scrollbar-color 和 scrollbar-width 自訂捲軸外觀。

  • scrollbar-color：接受兩個 <color> 值。第一個屬性適用於滑桿 (移動部分)，第二個屬性適用於軌道 (固定背景)。
  • scrollbar-width：接受 auto (預設)、thin (較細的變體) 或 none (完全隱藏捲軸，但仍可捲動)。

套用scrollbar-color和scrollbar-width

必要：在可捲動的容器上使用 scrollbar-color 和 scrollbar-width。

使用 scrollbar-color 時，請使用 CSS 變數區分捲軸和軌道顏色，以利閱讀和維護 (特別是使用備用方案時)。

.scroller {
  --scrollbar-thumb: var(--color-neutral-70);
  --scrollbar-track: var(--color-neutral-90);

  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

備用策略

scrollbar-color 的備用方案和瀏覽器支援

這項功能是漸進增強功能，不一定需要備用廣告。

如果樣式很重要，且使用者的基準目標是「基準廣泛可用」或更早版本，則應加入非標準 ::-webkit-scrollbar 虛擬元素做為備用。

在 @supports not (scrollbar-color: auto) 區塊中納入舊版備用屬性，避免在原生支援標準屬性和舊版 WebKit 選取器的瀏覽器中，發生兩者衝突的情況。

如果您使用自訂屬性定義顏色，這些屬性會自動套用至舊版 WebKit 選取器。您「不」需要複製這些項目。

/* Legacy fallback for WebKit/Blink browsers */
@supports not (scrollbar-color: auto) {
  .scroller::-webkit-scrollbar {
    /* Must define base size in WebKit for custom colors to be visual */
    width: 12px;
    height: 12px;
  }

  .scroller::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
  }

  .scroller::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
  }
}