::-webkit-scrollbar-track仅在WebKit/Blink浏览器（Chrome/Edge/Safari）中生效，Firefox不支持而需用scrollbar-width和scrollcolor；需显式设置background、确保滚动上下文、避免display:none，并注意iOS Safari版本兼容性。
Chrome/Firefox/Edge里::-webkit-scrollbar-track根本不起作用？
因为::-webkit-scrollbar-track只在基于WebKit/Blink的浏览器（Chrome、Edge、Safari）中生效，Firefox完全不支持这套伪元素——它用的是scrollbar-width和scrollbar-color这两个CSS属性。所以如果你在Firefox里调试没反应，不是写错了，是压根不认这个选择器。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 先用
@supports selector(::-webkit-scrollbar)做特性检测，把WebKit专属样式包进去 - 对Firefox单独写
html { scrollbar-width: thin; scrollbar-color: #888 #f5f5f5; } - 别指望
::-webkit-scrollbar-track能在Safari 16.4+以外的旧版iOS Safari上稳定工作——部分版本会忽略background或border-radius
::-webkit-scrollbar-track设了但滚动条轨道还是看不见？
常见原因是父容器没触发滚动上下文，或者轨道被其他伪元素遮盖。这个伪元素本身没有默认尺寸，必须显式设置background或border，否则就是透明的。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 确保滚动容器有
overflow: auto或overflow-y: scroll，且内容高度超过容器 - 给
::-webkit-scrollbar-track至少加一条background: #f0f0f0，不然它“存在但不可见” - 如果用了
::-webkit-scrollbar-thumb但没设border-radius，thumb可能溢出track边界，视觉上像track“消失”了 - 避免用
display: none隐藏track——这会导致整个滚动条退化为系统默认样式
怎么让::-webkit-scrollbar-track响应鼠标悬停变色？
不能直接给::-webkit-scrollbar-track加:hover，它不支持交互伪类。但可以间接实现：监听容器的mouseenter/mouseleave，动态切换一个class，再用该class控制track样式。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- HTML里给滚动容器加
id="my-scrollable" - CSS里写：
#my-scrollable.hovering ::-webkit-scrollbar-track { background: #e0e0e0; } - JS里绑定：
el.addEventListener('mouseenter', () => el.classList.add('hovering'))，离开时remove - 注意性能：别在
scroll事件里反复切class，只响应悬停就够了
移动端Safari里::-webkit-scrollbar-track为什么经常失效？
iOS Safari从15开始才有限支持::-webkit-scrollbar系列，且只在overflow: scroll + -webkit-overflow-scrolling: touch组合下勉强可用；到16.4才真正稳定。更麻烦的是，它会无视width或height，只按固定窄条渲染。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 优先用
overscroll-behavior: contain配合平滑滚动，比强改滚动条更可靠 - 如果必须自定义，只设
background和border-radius，放弃width控制 - 用
@media (pointer: coarse)检测触屏设备，直接禁用自定义滚动条，避免样式错乱
真正麻烦的从来不是怎么写对那几行CSS，而是得同时记住WebKit的规则、Firefox的断舍离、Safari的版本墙，还有移动端那些没写进规范的“行为例外”。写完记得在真机上点开DevTools远程调试——模拟器经常骗人。
