根据高对比度偏好设置调整滚动条

在操作系统或浏览器中启用高对比度模式的用户希望界面元素（如滚动条）非常清晰易读，通常依赖于鲜明的前景与背景分离，而不是细微的灰色或主题颜色。

本指南提供了有关如何使用 @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 bug 会导致滚动条在每次 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);
  }
}