滚动条样式

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

简介

从 Chrome 版本 2 开始,可以使用 ::-webkit-scrollbar-* 伪元素设置滚动条的样式。此方法在 Chrome 和 Safari 中都很有效,但 CSS 工作组从未标准化。

实现标准化的是 scrollbar-widthscrollbar-color 属性,它们是 CSS 滚动条样式模块级别 1 规范的一部分。从 Chrome 121 开始,这些属性受支持。

浏览器支持

  • Chrome:121。 <ph type="x-smartling-placeholder">
  • 边缘:121。 <ph type="x-smartling-placeholder">
  • Firefox:64。 <ph type="x-smartling-placeholder">
  • Safari:不支持。 <ph type="x-smartling-placeholder">

来源

滚动条入门指南

滚动条剖析

滚动条至少由一个轨迹和一个滑块组成。滑道是拇指可以移动的区域。轨迹表示整个滚动距离。滑块表示可滚动区域内的当前位置。滚动时,它会在轨道内移动。拇指通常也是可拖动的。

不过,滚动条可以有多个部分,而不仅仅是滑块和滑道。例如,滚动条可以包含一个或多个用于递增或递减滚动偏移的按钮。滚动条的组成部分由底层操作系统决定。

<ph type="x-smartling-placeholder">
</ph> 滚动条组成部分的示意图。
组成滚动条的各个部分的图示。左侧插图是一个最小的滚动条,其中只有轨迹和拇指。右边的按钮也有按钮。

传统滚动条和重叠式滚动条

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

叠加滚动条

叠加层滚动条是在下方内容之上的浮动滚动条。默认情况下,它们不会显示,只有当您主动滚动时才会显示。为了让内容保持可见状态,它们通常采用半透明形式,但这由操作系统来决定。在与它们互动时,它们的大小也可能有所变化。

<ph type="x-smartling-placeholder">
</ph> 图示:带有叠加滚动条的浏览器。
带有叠加滚动条的浏览器图示。滚动条会叠加在内容上;拇指是半透明的。

经典滚动条

传统滚动条是放置在专用滚动条边线中的滚动条。滚动条边线是内边框边缘与外内边距边缘之间的空间。这些滚动条通常是不透明的(不透明),并会占用相邻内容的某些空间。

<ph type="x-smartling-placeholder">
</ph> 插图:包含传统滚动条的浏览器。
带有经典滚动条的浏览器图示。滚动条位于内容旁边,具有专属区域;当使用重叠式滚动条时,内容的可用宽度会相对于可用宽度有所收缩。

scrollbar-colorscrollbar-width 属性

通过 scrollbar-color 为滚动条设置颜色

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

.scroller {
  scrollbar-color: hotpink blue;
}

默认情况下,使用叠加滚动条时,轨迹的颜色不起作用。不过,将鼠标悬停在滚动条上时,系统会显示航迹。

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

如需使用操作系统提供的默认呈现方式,请使用 auto 作为其值。

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

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

接受的值包括 autothinnone

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

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

.scroller {
  scrollbar-width: thin;
}

使用叠加滚动条时,仅当您主动滚动可滚动区域时,才会绘制拇指。

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

支持旧版浏览器

为了满足不支持 scrollbar-colorscrollbar-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-scrollbarwidthheight 时,系统始终会显示叠加层滚动条,实际上会变为经典滚动条。

要保持这种错觉,您可以选择仅在将鼠标悬停在滚动条上时更改颜色。

.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-* 颜色