Chrome 120+在非安全上下文（如file://、HTTP、非localhost）下禁用::-webkit-scrollbar，仅HTTPS和localhost可信；该伪元素不支持CSS变量或calc()；Firefox不支持，Safari支持有限；卡顿主因是thumb使用box-shadow/transform等重绘开销大的属性。
Chrome里::-webkit-scrollbar突然不生效了？
不是代码写错了，是Chrome 120+默认禁用了非安全上下文下的自定义滚动条。本地file://协议、HTTP页面、或者未启用HTTPS的开发服务器都会被拦截——控制台会静默忽略样式，也不报错。
- 必须确保页面运行在
https://或localhost下（后者从Chrome 120起才被信任） -
::-webkit-scrollbar本身不支持CSS变量、calc()或var(--color)动态值，所有尺寸/颜色得写死 - 如果父容器设置了
overflow: hidden或transform，可能遮盖滚动条，需检查层叠上下文
Firefox和Safari能用::-webkit-scrollbar吗？
不能。这是WebKit/Blink专属伪元素，Firefox完全无视，Safari虽基于WebKit但对部分子伪类支持不稳定（比如::-webkit-scrollbar-thumb:hover在Safari 17.4里会失效）。
- Firefox仅支持
scrollbar-width（auto/thin/none）和scrollbar-color（仅影响thumb+track颜色，无尺寸控制） - Safari 16.4+才开始支持
::-webkit-scrollbar-track，旧版连::-webkit-scrollbar-thumb都可能渲染异常 - 跨浏览器统一方案只能妥协：用
scrollbar-width: thin+scrollbar-color保底，Chrome单独加::-webkit-scrollbar
::-webkit-scrollbar各部分怎么精准控制宽高？
宽度由::-webkit-scrollbar的width（垂直）或height（水平）决定，但thumb尺寸受track约束，不能直接设height——它会自动拉伸填满track可用空间。
-
::-webkit-scrollbar：只设width（垂直滚动条）或height（水平滚动条），别设height+width同时存在 -
::-webkit-scrollbar-track：用border-radius圆角，但background不能用渐变（部分Chrome版本会渲染成纯色） -
::-webkit-scrollbar-thumb：优先用background-color，避免border（会导致thumb边缘出现不可控白边）
div::-webkit-scrollbar { width: 8px; }
div::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 4px; }
div::-webkit-scrollbar-thumb { background: #c1c1c1; border-radius: 4px; }
为什么加了::-webkit-scrollbar后滚动卡顿？
因为浏览器对伪元素的重绘优化极弱，尤其当thumb使用box-shadow、transform或复杂background-image时，每帧滚动都会触发全量重绘。
立即学习“前端免费学习笔记（深入）”；
- 绝对避免在
::-webkit-scrollbar-thumb里用box-shadow或filter - 不要给
::-webkit-scrollbar设transition（无效且徒增开销） - 如果容器有
will-change: transform，滚动条可能闪烁——删掉它，改用contain: strict更稳妥
