根據高對比偏好設定調整捲軸

使用者在作業系統或瀏覽器中啟用高對比模式時，會希望 UI 元素 (例如捲軸) 非常清晰易讀，通常會依賴明顯的前景與背景區隔，而非細微的灰色或主題顏色。

本指南提供選用操作說明，說明如何使用 @media (prefers-contrast: more) CSS 媒體功能，強制執行高對比捲軸樣式。

美化易讀性

使用 scrollbar-color 或自訂變數自訂捲軸時，您可以為高對比模式提供明確的覆寫值。如果主要應用程式主題基於美觀考量，使用低對比度的捲軸，這項功能就特別實用。

選用：使用 @media (prefers-contrast: more) 區塊，為滑桿和軌道定義深色、明顯的顏色。

/* Define default standard colors as variables */
.scroller {
  --scrollbar-thumb: #bbb;
  --scrollbar-track: #f1f1f1;

  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
  scrollbar-width: thin;
  scrollbar-gutter: stable;
}

/* OPTIONAL: Provide clear, high-contrast overrides */
@media (prefers-contrast: more) {
  .scroller {
    /* Use extremely distinct colors like solid black against white */
    --scrollbar-thumb: #000000;
    --scrollbar-track: #ffffff;
  }
}

使用 scrollbar-color 時應注意的問題

• 請勿為 scrollbar-color 加上動畫或轉場效果。WebKit 錯誤會導致捲軸在每次 scrollbar-color 變更時閃爍。
• 在 macOS 上，系統預設會忽略 scrollbar-color (標準) 和 ::-webkit-scrollbar (舊版) 屬性，因為 macOS 使用原生「疊加」捲軸。您必須將自訂顏色與 scrollbar-width (例如 thin 或 auto) 搭配使用，強制 macOS 轉譯這些顏色。
• 即使套用 scrollbar-width，macOS 疊加捲軸預設仍會將軌道 (邊線) 算繪為透明。如果設計要求在 MacOS 上顯示可見的軌道背景顏色，您必須將 scrollbar-gutter: stable; 套用至可捲動容器，但請注意，只有在使用者將滑鼠游標懸停在捲軸上時，才會顯示。
• 即使使用 scrollbar-gutter: stable，在 macOS 上，軌道仍可能呈現透明。滑桿不應依賴軌道顏色來顯示。

備用方案和瀏覽器支援

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);
  }
}