::-webkit-scrollbar仅在Chrome、Edge、Safari（16.4+才支持body）中生效，Firefox不支持，需用scrollbar-width和scrollbar-color；iOS Safari完全不支持任何滚动条样式定制。
Chrome/Firefox/Safari里::-webkit-scrollbar为什么没反应
因为::-webkit-scrollbar只在基于WebKit/Blink的浏览器中生效（Chrome、Edge、Safari），Firefox完全不支持，且必须作用于可滚动的容器（比如body、div），而不是任意元素。另外，如果容器没有溢出（overflow: auto或scroll），伪元素根本不会渲染。
- 确保目标元素设置了
overflow: auto或overflow: scroll - Firefox需改用
scrollbar-width和scrollbar-color这两个CSS属性替代 - Safari 16.4+ 才开始支持
::-webkit-scrollbar在body上生效，旧版只能作用于div等块级容器 - 不要给
::-webkit-scrollbar设display: none——它会直接让整个滚动条消失，包括拖拽功能
scrollbar-width和scrollbar-color在Firefox中怎么配
Firefox不认::-webkit-scrollbar，但提供了两个原生CSS属性：用scrollbar-width控制宽度（auto、thin、none），用scrollbar-color定义轨道色和滑块色（顺序是thumb track）。
-
scrollbar-width: thin会让滚动条变窄，但仅在桌面端生效，移动端无视 -
scrollbar-color: #6c6c6c #f1f1f1表示滑块是深灰、轨道是浅灰；第一个值是滑块色，第二个是轨道色 - 这两个属性必须写在滚动容器上（如
html、body或自定义div），不能只写在:root里 - 它们对Chrome/Safari无效，所以得和
::-webkit-scrollbar规则共存，用CSS层叠覆盖
自定义::-webkit-scrollbar-thumb时颜色总被忽略
常见原因是没给::-webkit-scrollbar-track设背景，或者父容器用了background-clip: padding-box之类影响了绘制层级。更隐蔽的问题是：某些UI框架（比如Ant Design）会在全局重置* { scrollbar-width: none }，直接干掉所有自定义机会。
- 必须同时定义
::-webkit-scrollbar-track和::-webkit-scrollbar-thumb，否则部分浏览器（如旧版Safari）会回退到默认样式 - 避免用
transparent或rgba(0,0,0,0)做轨道背景——有些版本Chrome会当它不存在，导致滑块不可见 - 如果用了CSS-in-JS（如Emotion、styled-components），注意插入顺序：自定义滚动条规则要晚于框架的重置样式，否则被覆盖
- 滑块高度/宽度不能靠
height/width硬调，得用min-height/min-width，否则在短内容下会塌缩
移动端iOS Safari里滚动条样式为何完全失效
iOS Safari（直到iOS 17）根本不支持任何滚动条伪元素或相关CSS属性，::-webkit-scrollbar、scrollbar-width全被忽略。它只提供系统级的“惯性滚动”和“淡入淡出”行为，外观无法干预。
- 别试图用
@supports检测::-webkit-scrollbar来降级——iOS Safari也支持这个语法，但就是不渲染 - 如果需要统一视觉，只能换思路：隐藏原生滚动条（
overflow: hidden），自己用touchstart/move/end+scrollTop模拟滚动，代价是失去原生惯性、弹性回弹和性能优化 - 某些PWA场景下，加
apple-mobile-web-app-capable=yes也不会解锁滚动条控制权 - 真正能起效的只有
-webkit-overflow-scrolling: touch（已废弃但仍有部分影响），但它只优化手感，不改变样式
跨浏览器滚动条定制本质是拼凑兼容性补丁，不是写一套就能跑通。最易被忽略的是：iOS Safari的彻底缺席，以及Firefox和WebKit引擎之间毫无交集的实现路径。动手前先查目标环境的实际支持表，比堆CSS更省时间。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
