Scroll this area to see your custom scrollbar in action. Adjust the controls on the left to change the width, color, radius and opacity of the scrollbar thumb and track.

CSS scrollbars are styled using two APIs: the WebKit pseudo-element approach (::-webkit-scrollbar) for Chrome, Edge, and Safari, and the W3C standard scrollbar-color and scrollbar-width properties for Firefox.

Both APIs are output below — copy both blocks and include them in your stylesheet for maximum cross-browser coverage.

Thin scrollbars with subtle colors are best for most UIs. Wider scrollbars improve accessibility — WCAG recommends interactive targets be at least 24px.

Mobile browsers generally ignore custom scrollbar styles. This is primarily a desktop feature.

On macOS, scrollbars are hidden by default and only appear on scroll. On Windows they always take up layout space.

Keep scrolling to test behaviour through the full scroll range.

Generated CSS

CSS滚动条样式 — 完整参考

浏览器滚动条是网页中最一致难看的默认UI元素之一，在不同操作系统间差异极大。在Windows上，它们显示为宽大的灰色条，即使不使用也会占用布局空间。在macOS上，它们很细，只在滚动时出现。CSS滚动条样式让你可以覆盖这些默认值，创建与设计系统匹配的滚动条——或者在保持内容可滚动的同时完全隐藏它们。

你必须了解的两个竞争API

目前有两个独立的CSS规范用于滚动条样式。WebKit伪元素API使用一系列::-webkit-scrollbar伪元素，在Chrome、Edge和Safari中有效。W3C CSS Scrollbars Level 1规范使用scrollbar-color和scrollbar-width属性——Firefox从版本64开始支持，Chrome和Edge从版本121开始采用。生产代码的正确做法是同时包含两者。

WebKit伪元素系列

WebKit方法通过将滚动条的子组件暴露为可样式化的伪元素来工作。::-webkit-scrollbar伪元素针对整个滚动条，在这里设置width（垂直滚动条）和height（水平滚动条）。::-webkit-scrollbar-thumb样式化可拖拽的手柄。::-webkit-scrollbar-track样式化手柄后面的轨道区域。重要提示：要使WebKit滚动条样式生效，元素必须实际上有一个滚动条——需要overflow: auto或overflow: scroll以及溢出其尺寸的内容。

W3C scrollbar-color属性

scrollbar-color属性接受恰好两个颜色值：首先是thumb颜色，然后是轨道颜色。它不接受渐变，不能控制悬停状态或border-radius。它在控制上的不足被简洁性和标准合规性所弥补。

scrollbar-width属性

auto使用平台默认值。thin产生更细的滚动条，在大多数实现中约为8px。none完全隐藏滚动条同时保持内容可滚动——元素仍然响应鼠标滚轮、键盘和触摸滚动事件，但不会显示可见的滚动条。

限定滚动条样式的作用域

没有作用域选择器声明的滚动条样式会全局应用于页面上所有可滚动元素。要将样式限定在特定元素——如代码块或侧边栏导航——在伪元素前加上元素选择器：.code-block::-webkit-scrollbar { width: 4px; }。

水平滚动条样式

水平滚动条在::-webkit-scrollbar伪元素上使用height而不是width。其他所有内容与垂直滚动条的工作方式相同。

为无障碍性设计滚动条

最重要的无障碍性考虑是滚动条的可见性和尺寸。非常细的滚动条——2-3px宽——可能几乎不可见，对于运动障碍用户来说很难用鼠标抓取。WCAG 2.1成功标准2.5.5建议交互目标至少为44×44 CSS像素。

macOS vs Windows行为

macOS默认隐藏滚动条，只在主动滚动时以覆盖层形式显示。这意味着滚动条不占用布局空间。在Windows上，传统滚动条永久占用内容旁边的布局空间。使用scrollbar-gutter: stable在macOS上为滚动条保留布局空间。

移动端滚动条行为

iOS Safari和Android Chrome将滚动条作为覆盖层处理，在滚动时短暂出现然后淡出。自定义滚动条CSS在移动端基本上没有效果——无论你的CSS如何，平台都会渲染自己的滚动指示器覆盖层。

使用CSS变量实现主题化滚动条

自定义滚动条最实用的应用之一是将其整合到设计系统的主题token中。通过使用CSS自定义属性作为thumb和轨道颜色，当主题类或prefers-color-scheme媒体查询切换变量值时，滚动条会自动重新着色。

自定义滚动条在Firefox中有效吗？

Firefox从版本64开始支持scrollbar-color和scrollbar-width属性。它不支持::-webkit-scrollbar伪元素。为了覆盖Firefox，始终同时包含两个API。

为什么我的::-webkit-scrollbar样式不起作用？

元素必须有滚动条才能样式化。检查元素是否有overflow: auto或overflow: scroll，以及内容是否实际溢出元素的尺寸。

可以用scrollbar-color使用渐变吗？

不能——scrollbar-color只接受两个纯色值。渐变只能通过WebKit浏览器中的::-webkit-scrollbar-thumb { background: linear-gradient(...) }实现。

什么是scrollbar-gutter，何时应该使用？

scrollbar-gutter控制是否为滚动条保留布局空间，即使它不可见。stable值永久保留空间，防止当内容变化导致滚动条出现或消失时布局移位。

Tool last updated: