::-webkit-scrollbar仅在Chrome/Edge/Safari生效，Firefox需用scrollbar-width和scrollbar-color；其width无效，须设::-webkit-scrollbar-thumb的width/height；移动端支持差，iOS/Android常忽略宽度设置。
Chrome/Firefox/Edge里::-webkit-scrollbar为什么没生效
因为::-webkit-scrollbar只在基于WebKit/Blink的浏览器中有效（Chrome、Edge、Safari），Firefox完全不支持，它用的是scrollbar-width和scrollbar-color这两个CSS属性。很多同学写了::-webkit-scrollbar却在Firefox里看不到效果，第一反应是“代码写错了”，其实是浏览器根本不认这个伪元素。
实操建议：
- 先确认目标浏览器：Chrome/Edge/Safari → 用
::-webkit-scrollbar；Firefox → 改用scrollbar-width - 必须给容器设置
overflow: auto或overflow: scroll，否则伪元素不会被渲染 -
::-webkit-scrollbar本身不接受width，得配合::-webkit-scrollbar-thumb和::-webkit-scrollbar-track一起用
::-webkit-scrollbar设置width的正确写法
直接写::-webkit-scrollbar { width: 8px; }是无效的——这个伪元素只是个“容器占位符”，真正控制宽度的是它的子部件。滚动条宽度由::-webkit-scrollbar-thumb的width（横向滚动条）或height（纵向滚动条）决定，但前提是父容器有明确的overflow-x或overflow-y方向。
常见错误现象：设置了width: 6px但滚动条还是老样子，大概率是因为只改了::-webkit-scrollbar，没动thumb。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 纵向滚动条（最常用）：
::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-thumb { width: 8px; /* 这行才真正影响视觉宽度 */ background-color: #ccc; border-radius: 4px; } - 必须同时设置
background-color，否则thumb透明不可见 - 如果容器高度不够、内容没溢出，
thumb也不会出现，别误以为样式失效
Firefox里怎么改滚动条宽度
Firefox不用伪元素，它提供两个原生CSS属性：scrollbar-width和scrollbar-color，但注意：scrollbar-width只接受auto、thin、none三个值，不能设具体像素。也就是说，你无法在Firefox里精确控制滚动条为6px宽，只能选“窄一点”或“默认”。
使用场景：如果你的UI要求所有浏览器滚动条都统一细窄，那Firefox下只能妥协为thin，视觉上接近但不等同于WebKit系的8px。
实操建议：
- 写法：
body { scrollbar-width: thin; scrollbar-color: #999 #f5f5f5; } -
scrollbar-color第一个值是thumb色，第二个是track色，顺序不能反 - 该属性只作用于根滚动容器（如
body或html），对div等自定义滚动容器无效
自定义滚动条在移动端和触控设备上的表现
iOS Safari和Android Chrome对::-webkit-scrollbar的支持极不稳定：iOS 16+开始部分支持，但thumb宽度经常被忽略；Android则基本只响应background-color，width和border-radius大概率失效。
性能影响不大，但兼容性坑很大。很多团队最后发现，真正在手机上“能稳定变细”的唯一办法，是禁用原生滚动，用touchmove + transformY自己实现滚动逻辑——代价是失去惯性滚动、缩放手势、系统级可访问性支持。
实操建议：
- 移动端优先考虑接受系统默认滚动条，尤其面向大众用户的产品
- 若必须定制，先在真机上测
::-webkit-scrollbar-thumb { width: 6px; }是否可见，别只信桌面模拟器 - 避免在
position: fixed或transform容器里套自定义滚动条，容易触发渲染异常
实际项目里最常被忽略的一点：滚动条宽度变化后，容器内部内容的可用宽度可能微调（尤其当overflow-y: scroll始终显示滚动条时），这会引发布局抖动或文字换行错位。别只盯着样式生效没生效，得看它有没有悄悄挤走你的内容。
