滚动条样式

使用 scrollbar-width 和 scrollbar-color 属性设置滚动条的样式。

Bramus

简介

从 Chrome 版本 2 开始，您就可以使用 ::-webkit-scrollbar-* 伪元素来设置滚动条的样式。这种方法在 Chrome 和 Safari 中效果不错，但从未被 CSS 工作组标准化。

已标准化的属性是 scrollbar-width 和 scrollbar-color 属性，它们是 CSS 滚动条样式模块级别 1 规范的一部分。自 Chrome 121 起，这些属性已受支持。

Browser Support

• 121
• 121
• 64
• 26.2

Source

滚动条基础知识

滚动条详解

滚动条至少包含轨道和滑块。轨道是指滑块可移动的区域。轨道表示整个滚动距离。滑块表示可滚动区域内的当前位置。当您滚动时，它会在轨道内移动。拇指通常也可以拖动。

不过，滚动条的组成部分可能不止滑块和轨道。例如，滚动条可以包含一个或多个用于增加或减少滚动偏移量的按钮。组成滚动条的各个部分由底层操作系统决定。

显示构成滚动条的各个部分的插图。左侧的插图是一个仅包含轨道和滑块的最简滚动条。右侧的也有按钮。

经典滚动条和叠加层滚动条

在了解如何设置滚动条样式之前，请务必了解两种滚动条之间的区别。

叠加滚动条

叠加滚动条是呈现于下方内容顶部的浮动滚动条。默认情况下，这些指示器不会显示，只有在您主动滚动时才会显示。为了让用户能够看到下方的应用内容，这些广告通常是半透明的，但具体是否半透明由操作系统决定。在互动过程中，它们的大小也可能会发生变化。

带有叠加滚动条的浏览器图示。滚动条会叠加在内容上；滑块是半透明的。

经典滚动条

经典滚动条是指放置在专用滚动条边衬区 (scrollbar gutter) 中的滚动条。滚动条边衬区是内边框边缘与外边衬区边缘之间的空间。这些滚动条通常是不透明的，会占用相邻内容的一些空间。

带有传统滚动条的浏览器插图。滚动条位于内容旁边自己的专用区域中；与使用叠加滚动条时相比，内容的可用宽度会缩小。

scrollbar-color 和 scrollbar-width 属性

使用 scrollbar-color 为滚动条着色

借助 scrollbar-color 属性，您可以更改滚动条的配色方案。该属性接受两个 <color> 值。第一个 <color> 值用于确定滑块的颜色，第二个值用于确定轨道所用的颜色。

.scroller {
  scrollbar-color: hotpink blue;
}

使用叠加滚动条时，轨道颜色默认情况下不起作用。不过，当鼠标悬停在滚动条上时，轨道会显示出来。

演示：设置滚动条样式：scrollbar-color

如需使用操作系统提供的默认渲染，请将此属性的值设为 auto。

使用 scrollbar-width 更改滚动条的大小

借助 scrollbar-width 属性，您可以选择更窄的滚动条，甚至完全隐藏滚动条，而不会影响滚动功能。

接受的值包括 auto、thin 和 none。

• auto：平台提供的默认滚动条宽度。
• thin：平台提供的细滚动条变体，或比默认平台滚动条更细的自定义滚动条。
• none：有效隐藏滚动条。不过，该元素仍然可滚动。

无法使用 <length>（例如 16px）作为 scrollbar-width 的值。

.scroller {
  scrollbar-width: thin;
}

使用叠加滚动条时，只有在您主动滚动可滚动区域时，才会绘制滑块。

演示：设置滚动条样式：scrollbar-width

支持旧版浏览器

为了迎合不支持 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);
    }
}

演示：使用 scrollbar-* 设置滚动条样式，并回退到 ::-webkit-scrollbar-*

请注意，当您设置 ::-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. */
}

演示：使用 scrollbar-* 设置滚动条样式，并回退到 ::-webkit-scrollbar-*，仅在悬停时应用 ::-webkit-scrollbar-* 颜色