1. 滚动条要不要自定义先搞清楚浏览器给你开放了哪条路前阵子做数据后台的布局优化UI 同学扔了张稿子过来右侧列表在表格超过屏幕时要展示四列的滚动条但不能是系统默认那种灰扑扑的粗滚轴要有 4px 左右细长、圆角、淡色的滑块。我第一反应是加几行 CSS 不就行了结果真正动手才发现滚动条样式这玩意在浏览器里分成了完全不同的两套渲染路线稍不留神就把样式写成了 Chrome 限定版Firefox 打开直接打回原形。先说结论当前修改滚动条外观主流方案就是两条路线并行。一条是 WebKit 内核下的::-webkit-scrollbar伪元素体系Chrome、Edge、Safari 都认另一条是 W3C 把 Firefox 实践吸纳进来的标准属性scrollbar-width和scrollbar-color新版本 Firefox 和 Chrome 121 之后都已经支持。两条路线的能力边界不一样如果你把它俩当成同一件事来写做出来的效果一定会在某个浏览器里翻车。所以这篇文章不打算只给一段模板代码而是把滚动条样式背后那套浏览器怎么画滚动条的机制摊开。先弄清楚你改的到底是哪家渲染引擎的零件再动手去设计滑块、轨道、圆角最后我把自己踩过的几个坑也一并列出来。我默认读者已经会用 CSS 选择器、知道什么是指定元素的伪元素但如果你刚接触前端不久下面的代码和说明也足够让你照着抄。我建议你把滚动条样式当成组件皮肤来理解而不是简单的文字加粗那种样式。浏览器里的滚动条是一个由轨道Track、滑块Thumb、两端的箭头按钮Button和角落的三角区域Corner组合起来的复合组件。组件皮肤化的意思是不同浏览器允许你控制的层不同并且层与层之间还互相影响。控制得顺不顺手取决于你用的那套 API 覆盖到了第几层。2. 把 WebKit 的滚动条拆开看::-webkit-scrollbar 家族的四个零件2.1 伪元素并不只有一条它们各管一段如果你想让 Chrome 里的滚动条变成细长、圆角、不突兀的效果最常用的是下面三条伪元素::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: #f5f5f5; } ::-webkit-scrollbar-thumb { background: #c1c1c1; border-radius: 3px; }这三行分别是滚动条整体宽度、轨道背景、滑块颜色。::-webkit-scrollbar负责总尺寸::-webkit-scrollbar-track是指滑块滑动的底层区域::-webkit-scrollbar-thumb是实际跟着内容移动的那个小方块。三者的关系很简单轨道是路滑块是在路上跑的车滚动容器是道路的边界。但 WebKit 伪元素家族不止这三个还有几个容易被忽略的成员::-webkit-scrollbar-corner横向滚动条和纵向滚动条交汇的右下角区域默认是灰白色方块经常被忘记而露馅。::-webkit-scrollbar-button滚动条两端的上下箭头按钮。桌面端浏览器在不做特殊样式时会显示一个黑色小三角很多前端项目希望隐藏掉它直接设置display: none即可。::-webkit-resizer部分可缩放元素的右下角拖拽手柄出现在 textarea 等元素上颜色样式会被 corner 覆盖。我给一个比较完整的按钮隐藏 右下角着色写法适合做成系统统一风格/* 整体调宽 */ ::-webkit-scrollbar { width: 8px; height: 8px; } /* 去掉两端箭头按钮 */ ::-webkit-scrollbar-button { display: none; } /* 轨道和滑块分开处理 */ ::-webkit-scrollbar-track { background: #fafafa; border-radius: 4px; } ::-webkit-scrollbar-thumb { background: #ccc; border-radius: 4px; } /* 横竖滚动条交汇处也要上色不然会留个白点 */ ::-webkit-scrollbar-corner { background: #fafafa; }很多人只写了前四条一旦列表高度偶尔超出、宽度没超出横竖滚动条一起出现时右下角那个默认灰色块就会很明显。把 corner 一起处理掉是让滚动条显得有人管过的关键细节。2.2 滑块的透明边框是怎么玩出间隙效果的如果你希望滚动条不是紧紧贴在内容边缘而是悬浮在轨道里可以用滑块背景 透明边框来制造间隙。这个方法我在多个项目里实测过效果很稳定::-webkit-scrollbar { width: 12px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background-color: rgba(0, 0, 0, 0.3); border: 3px solid transparent; background-clip: padding-box; border-radius: 6px; }这里的关键是border: 3px solid transparent加上background-clip: padding-box。如果不加background-clip滑块的背景色会跑到边框底下看起来依然是填满整个宽度加了这个属性之后背景只填充到内边距边界边框区域透出透明色视觉上滑块宽度就从 12px 减到了 6px且两侧各留 3px 空隙。我再说明白一点你把滑块想成一块夹心饼干border是最外面那层透明糖壳background是里面的颜色夹心background-clip: padding-box就是让夹心只存在到糖壳的内沿为止。没有了这层声明糖壳会被夹心整个糊住间隙效果就直接失效了。这套写法在需要精细控制滚动条视觉时特别管用因为你可以只调 border 的宽度来改变滑块视觉厚度而不需要回头改总宽度。圆角也能配合得比较好border-radius设成总宽度的一半滑块看起来就是端端正正的两端半圆。2.3 hover 与 active 状态下的动态反馈滚动条不应该是死板的用户滚动时滑块需要有一点状态变化否则在深色背景的页面里经常找不到滚动条到底滚到哪里了。WebKit 伪元素支持:hover和:active可以直接作用在滑块和轨道上::-webkit-scrollbar-thumb { background-color: rgba(0, 0, 0, 0.3); border-radius: 4px; } /* 鼠标悬浮在滚动条上 / 滑块上时变深 */ ::-webkit-scrollbar-thumb:hover { background-color: rgba(0, 0, 0, 0.5); } /* 正在拖拽时颜色再深一档 */ ::-webkit-scrollbar-thumb:active { background-color: rgba(0, 0, 0, 0.7); }需要注意::-webkit-scrollbar-thumb:hover触发的前提是鼠标精确悬浮在滑块自身区域而不是悬浮在整个滚动轨道上。想要悬浮轨道时滑块变亮这种效果写法是::-webkit-scrollbar-track:hover里面再去修改滑块颜色吗做不到因为轨道和滑块是两个平级伪元素你在轨道上写 hover并不能通过后代选择器去影响滑块。真正的做法是给轨道和滑块同时写:hover分别变颜色视觉上造成整体高亮::-webkit-scrollbar-track:hover { background: #f0f0f0; } ::-webkit-scrollbar-track:hover ::-webkit-scrollbar-thumb { background: #b0b0b0; }后面这一段::-webkit-scrollbar-track:hover ::-webkit-scrollbar-thumb在部分 WebKit 版本里有效但风险很高不信你在不同 Chrome 版本间切换试试它会时灵时不灵。我在实际项目里更倾向使用 JavaScript 给滚动容器加 hover 类再用类选择器去控制滑块兼容性绝对稳代价是多写几行脚本。这是滚动条样式最容易踩的隐性差异之一后面第 4 节我会专门展开。3. 标准属性路线scrollbar-width 和 scrollbar-color 的实操边界3.1 这两行属性到底能干什么过去很长一段时间Firefox 对::-webkit-scrollbar完全不理不睬前端组做项目要么靠-moz-scrollbar前缀碰碰运气要么干脆放弃 Firefox。后来 Firefox 自己实现了一个 CSS 标准属性然后这个属性也被慢慢收录进标准只用了两个属性就控制住滚动条的主要外观.container { scrollbar-width: thin; scrollbar-color: #c1c1c1 #f5f5f5; }scrollbar-width接收三个值auto表示浏览器默认宽度thin表示让滚动条变细的细款none表示完全隐藏滚动条但保留滚动能力。scrollbar-color接收两个颜色值第一个给滑块thumb第二个给轨道track。两个值缺一不可只给一个会让第二个回退到默认色写反了也一样会看起来十分别扭。Chrome 121 开始在 Windows、Linux 和 Android 上支持这两个属性macOS 的 支持策略比较特殊因为系统默认是隐藏的 overlay 模式滚动条不滚动时是透明的滚动时悬浮显示即便如此只要内容区域可滚动scrollbar-color依然能生效你会发现滚动条出现时颜色已经被改变。这里最容易产生的困惑是在 macOS 下写了scrollbar-color但平时看不到滚动条误以为代码没生效其实只要触发滚动颜色就出来了。标准属性是真正意义上的两行代码改全局适合追求快速收敛的项目。比如你只想让站点的所有滚动条统一成浅灰色直接把规则挂在html或*上* { scrollbar-width: thin; scrollbar-color: #b3b3b3 #e9e9e9; }这比 WebKit 伪元素写一整套要省事得多。但它的能力有硬上限圆角、hover 变化、滑块的边框粗细、轨道的渐变这些细分项标准属性一律管不到。你想要极致的造型自由度还是只能靠伪元素路线。3.2 横竖两条滚动条都能被标准属性覆盖吗scrollbar-color会同时作用于纵向和横向滚动条你不需要为横向滚动条额外写一套::-webkit-scrollbar-horizontal。不过要记住标准属性只作用于那个元素的滚动条而不是它的子元素。如果外层容器开了overflow: auto里面还有一个 div 也开了overflow: auto两条滚动条都会产生但你在外层写特性里面那条不受任何影响。这种情况很多前端初学者会踩给body设置了滚动条颜色然后在某个深层div里发现滚动条还是老的默认样式。要解决就对该div单独再做一遍设置。3.3 标准写法要不要和 WebKit 伪元素同时写我的一个稳定组合是基础配色用标准属性兼容 Firefox 和 ChromeWebKit 伪元素只做 Chrome/Safari 下的精细化补充。这样思想清晰且不会出现一个浏览器读标准属性另一个浏览器完全不管的局面。举一个实际例子我想要 6px 宽、浅灰轨道、深灰滑块滑块带 3px 圆角就在全局样式里写/* 标准属性Firefox 和 Chrome 121 能识别 */ html { scrollbar-width: thin; scrollbar-color: #a0a0a0 #f0f0f0; } /* WebKit 补充控制宽度和圆角 */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: #f0f0f0; } ::-webkit-scrollbar-thumb { background: #a0a0a0; border-radius: 3px; }注意scrollbar-width: thin在 Chrome 里的实际宽度跟 Chrome 的默认窄滚动条保持一致并不是你设置的 6px。如果你对宽度有执念还得靠::-webkit-scrollbar里的 width 和 height。标准属性在 Chrome 上主要贡献了颜色宽度方面它管得比较含蓄。4. 滚动条实战里那些真正让人头疼的坑4.1 滑块 hover 高亮不生效问题出在层级关系我前面提到过::-webkit-scrollbar-track:hover ::-webkit-scrollbar-thumb时灵时不灵这里展开讲讲原因。WebKit 在实现滚动条伪元素时并不是把滑块放在轨道内部的 DOM 树里。从 HTML 结构看滚动条完全是浏览器绘制在内部私有层上的伪元素只提供样式挂钩彼此之间没有 DOM 父子关系。所以你对 track 写:hover期望滑块的背景色跟着变这在 CSS 选择器语义上就是不成立的——它俩没有真实的祖先/后代关系后代选择器自然不稳定。我在一个管理系统里试过三种方案用overflow: overlay配合 hover 伪类老版本 Chrome 下部分生效新版直接失效用 track 和 thumb 各自写:hover视觉一致但鼠标需要正好命中滑块才变色用容器类名 鼠标监听组件上mouseenter添加scrolling-active类滚动条滑块和轨道跟着变。最后为了稳定我选了第三种。它确实多消耗一点 JS但换来了所有浏览器下行为统一。那时给我的教训就是不要试图用伪元素之间的嵌套选择器去做状态联动浏览器不承诺这个行为你就不应该依赖它。4.2 内容抖动问题滚动条占位把布局挤宽了这是滚动条样式里最怨种的一种现象。一个区块原本宽度是100%内容少时不出滚动条内容一多、滚动条冒出来区块的可用宽度被滚动条占掉一截导致文字换行、表格列宽跳动整个页面像在呼吸。两个主流解法我都试过思路完全相反方法一始终让滚动条占位。给容器overflow-y: scroll不管内容多少都显示滚动条宽度从头就固定内容不会跳动。方法二把滚动条改成 overlay 覆盖式。新 Chrome 的 overlay 滚动条不影响布局但旧内核下要用overflow: overlay移到了标准之外建议少用。如果你用的是 WebKit 伪元素还有一招能让滚动条几近透明但仍然占位把滑块和轨道背景都设为透明保留滚动功能不会挤掉宽度。缺点是用户在视觉上完全找不到滚动条滚动体验偏弱一般适合短列表或自动滚动的轮播区域。4.3 隐藏滚动条的三种实现只有一种能兼顾鼠标滚动有些场景你想隐藏滚动条但保留滚动比如横向图片轮播、Tab 栏网上常见三种写法分别有各自的连带问题/* 写法 A彻底移除滚动条横向滚动也没了 */ overflow: hidden; /* 写法 B兼容好但 Firefox 可能表现不一致 */ overflow: auto; scrollbar-width: none; /* 写法 Cwebkit 专用隐藏 */ overflow: auto; ::-webkit-scrollbar { display: none; }正确的组合是把 B 和 C 一起用再给容器加上允许横向滚动.scroll-x { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; scrollbar-color: transparent transparent; -webkit-overflow-scrolling: touch; } .scroll-x::-webkit-scrollbar { display: none; width: 0; height: 0; }注意scrollbar-color: transparent transparent是必要的因为 Firefox 的scrollbar-width: none在现代版本中已经比较可靠但某些细分版本里none仍会露出细条轨道我把它和透明色一起写上双保险。用户依然能用触控板、鼠标滚轮滚动只是界面看不到滚动条了。这种隐藏方式比overflow: hidden体面得多因为overflow: hidden会把横向滚动全部杀掉移动端滑动直接失灵。4.4 mac 上滚动条隐身的真相在 macOS 上系统默认开启显示滚动条滚动时显示。这意味着滚动条平时是浮在内容上面的半透明细条不滚动时干脆看不见。你写再多的::-webkit-scrollbar样式只要用户没滚动页面上就是一片干净的无滚动条状态。很多测试同学会顺手开一个 bug滚动条不见了。其实不是代码问题是系统设置。如果想在 mac 上也稳定看到自定义滚动条有两个办法。一是改用户自己系统偏好设置里的显示滚动条为始终但你不能要求用户改系统设置。二是在你的项目里强制使用 overlay 行为比如用 JS 给滚动容器加一条自定义提示条或者接受 mac 上的滚动时出现交互。这其实是 macOS 视觉习惯的一部分不要跟它对着干否则你为了 始终可见 付出的大量样式努力只会让滚动条长期压在内容上遮挡文字。4.5 把滚动条做成主题色跟随的小模板最后一节我留个可以直接抄走的模板。假设你的项目使用 CSS 变量管理主题色希望滚动条跟随品牌色变化可以这样组织:root { --scroll-thumb: #4a90d9; --scroll-thumb-hover: #357abd; --scroll-track: #f4f6f9; --scroll-size: 8px; } /* 标准属性路线 */ html { scrollbar-width: thin; scrollbar-color: var(--scroll-thumb) var(--scroll-track); } /* WebKit 路线 */ ::-webkit-scrollbar { width: var(--scroll-size); height: var(--scroll-size); } ::-webkit-scrollbar-track { background: var(--scroll-track); border-radius: calc(var(--scroll-size) / 2); } ::-webkit-scrollbar-thumb { background: var(--scroll-thumb); border-radius: calc(var(--scroll-size) / 2); } ::-webkit-scrollbar-thumb:hover { background: var(--scroll-thumb-hover); }这里我刻意没有给滑块加透明 border 制造间隙因为要兼顾标准属性下 F火狐的颜色。一旦你强行把滑块宽度改细同时标准属性那边滑块还是会占满轨道两边视觉效果就对不齐。我的经验是先用scrollbar-color保证 Firefox 有一个统一的粗条颜色再用 WebKit 伪元素把 Chrome 打磨成细条圆角。追求完美的像素级统一很难但一眼看上去是一个风格的滚动条是完全做得到的。在项目里我一般把这块样式放在一个独立的scrollbar.css里上面的 CSS 变量只跟主题变量联动这样以后要换滚动条风格或者遇到某个组件需要局部特殊滚动条只需要覆盖变量即可主样式不用动。这比我早年直接把伪元素写爆在全站*选择器里要好维护得多——全局覆盖的问题在于你没法让某个 card 突然换成橙色滑块除非单独给那个 card 再做一遍权重大战。滚动条样式看起来是个边缘小需求但它是设计还原度里特别刺眼的一环。默认的灰色大粗条在精致界面里出现一次整体质感就被拉低一截。把这两条路线都装进脑子再去写样式你会发现桌面端到移动端都能稳住了。
