自定义滚动条的颜色或粗细

Web 功能： 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);
  }
}