chrome/edge/safari用::-webkit-scrollbar系列伪元素定制，firefox仅支持scrollbar-width和scrollbar-color，ios safari基本不支持；移动端应优先用js滚动库或禁用回弹。
Chrome/Firefox/Edge里滚动条样式完全不生效？
不是你的CSS写错了，而是浏览器支持差异太大——::-webkit-scrollbar 只在基于Chromium的浏览器（Chrome、Edge、新版Opera）和Safari里有效；Firefox从2023年起才通过scrollbar-width和scrollbar-color支持有限定制；IE已淘汰，不用考虑。
所以别试图用一套CSS搞定所有浏览器。实操建议分两路：
- 对Chrome/Edge/Safari：用
::-webkit-scrollbar+::-webkit-scrollbar-track+::-webkit-scrollbar-thumb三层控制 - 对Firefox：只设
scrollbar-width: thin | auto | none和scrollbar-color: <thumb><track></track></thumb>，不能调圆角、阴影或宽度百分比 - 不要给
::-webkit-scrollbar设width或height以外的盒模型属性（比如padding或margin），它不响应
::-webkit-scrollbar-thumb怎么调成圆角+悬停变色？
这是最常被问但最容易翻车的操作。关键点在于：::-webkit-scrollbar-thumb 是一个“伪元素容器”，它只接受部分CSS属性，且必须配合::-webkit-scrollbar 的width/height才能显形。
典型写法：
/* 必须先声明滚动条尺寸 */
.container::-webkit-scrollbar {
width: 8px; /* 垂直滚动条 */
height: 8px; /* 水平滚动条 */
}
<p>.container::-webkit-scrollbar-thumb {<br>
background-color: #999;<br>
border-radius: 4px; /<em> ✅ 有效 </em>/<br>
border: 2px solid transparent; /<em> 防止缩小时塌陷 </em>/<br>
} </p><p>.container::-webkit-scrollbar-thumb:hover {<br>
background-color: #666; /<em> ✅ 有效 </em>/<br>
}</p>
容易踩的坑：
-
border-radius超过width/2会失效（比如width: 6px却设border-radius: 4px） - 没设
background-clip: padding-box时，border可能遮住圆角 - 在flex或grid容器里，如果子元素没触发滚动（比如高度未超限），伪元素根本不会渲染
移动端（iOS Safari / Android Chrome）滚动条能改吗？
基本不能。iOS Safari 完全忽略::-webkit-scrollbar系列规则；Android Chrome虽支持，但仅限于页面级滚动条，对overflow: auto的局部容器支持极不稳定，且thumb尺寸经常被系统强制重置。
如果你的目标是“让滚动体验更一致”，现实方案是：
- 放弃样式定制，用
overscroll-behavior: contain禁用下拉回弹等干扰行为 - 局部滚动容器改用JS方案（如
simplebar或virtual-scroll），它们在移动端可控性更强 - 切勿在
@media (hover: none)里写::-webkit-scrollbar规则——它不生效，且可能引发CSS解析错误
为什么加了样式后滚动突然卡顿？
因为::-webkit-scrollbar伪元素会触发额外的合成层（compositing layer），尤其当用了box-shadow、transform或渐变background时，GPU负担陡增。
性能优化要点：
- 拇指颜色优先用纯色
rgb()或十六进制，避开linear-gradient() - 避免在
::-webkit-scrollbar-track上设opacity或filter - 如果容器内容频繁重绘（如动画列表），把滚动条样式限制在
.scrollable-area这类明确类名下，别用body或全局选择器 - 用Chrome DevTools的“Rendering”面板勾选“Layer borders”，看是否意外多出合成层
最麻烦的地方其实不在写法，而在于你永远得同时盯着三套规则：WebKit系的伪元素、Firefox的两个属性、移动端的妥协方案——稍一疏忽，某个平台就退回丑陋原生滚动条，还查不出原因。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
