使用 scrollbar-width
和 scrollbar-color
属性设置滚动条的样式。
简介
从 Chrome 版本 2 开始,可以使用 ::-webkit-scrollbar-*
伪元素设置滚动条的样式。这种方法在 Chrome 和 Safari 中很有效,但 CSS 工作组从未将其标准化。
标准化的 scrollbar-width
和 scrollbar-color
属性是 CSS 滚动条样式模块第 1 级规范的一部分。从 Chrome 121 开始,系统支持这些属性。
滚动条入门指南
滚动条详解
滚动条至少由滑道和滑块组成。滑道是拇指可以移动的区域。轨迹表示整个滚动距离。滑块代表可滚动区域内的当前位置。滚动时,它会在轨道内移动。拇指通常也可以拖动。
不过,滚动条可以包含多个部分,而不仅仅是滑块和滑道。例如,滚动条可以包含一个或多个用于增加或减少滚动偏移量的按钮。滚动条的组成部分由底层操作系统决定。
传统版和叠加滚动条
在了解如何设置滚动条的样式之前,请务必先了解滚动条类型之间的区别。
叠加滚动条
重叠式滚动条是在下方内容之上呈现的悬浮滚动条。默认情况下,它们不会显示在此处,而是仅在用户主动滚动时才显示。为了让下方内容保持可见,它们通常是半透明的,但具体由操作系统决定。在与它们互动时,它们的大小也可能有所不同。
经典滚动条
传统滚动条是放置在专用滚动条边线中的滚动条。滚动条边线是内边框边缘与外内边距边缘之间的空间。这些滚动条通常是不透明(不透明)的,会占用一些与相邻内容的空间。
scrollbar-color
和 scrollbar-width
属性
使用 scrollbar-color
为滚动条指定颜色
您可以使用 scrollbar-color
属性更改滚动条的配色方案。该属性接受两个 <color>
值。第一个 <color>
值用于确定滑块的颜色,而第二个值则用于确定航迹的颜色。
.scroller {
scrollbar-color: hotpink blue;
}
默认情况下,使用叠加滚动条时,航迹颜色不会产生任何影响。不过,将鼠标悬停在滚动条上时,系统会显示航迹。
如需使用操作系统提供的默认渲染,请使用 auto
作为其值。
使用 scrollbar-width
更改滚动条的大小
借助 scrollbar-width
属性,您可以选择较窄的滚动条,甚至可以完全隐藏滚动条,而不会影响可滚动性。
接受的值包括 auto
、thin
和 none
。
auto
:平台提供的默认滚动条宽度。thin
:平台提供的滚动条的瘦变体,或比默认平台滚动条更细的自定义滚动条。none
:有效隐藏滚动条。不过,元素仍然可滚动。
无法将 <length>
(例如 16px
)用作 scrollbar-width
的值。
.scroller {
scrollbar-width: thin;
}
使用叠加滚动条时,只有在主动滚动可滚动区域时,系统才会绘制拇指。
支持旧版浏览器
为了适应不支持 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);
}
}
请注意,当您设置 ::-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. */
}