firefox 仅支持 scrollbar-width 和 scrollbar-color，且仅对根元素或直接可滚动元素生效；webkit 中 ::-webkit-scrollbar 定位受父级层叠上下文影响；ios safari 不支持任何自定义滚动条样式。
scrollbar-width 和 scrollbar-color 在 Firefox 中失效？
Firefox 只支持 scrollbar-width 和 scrollbar-color 这两个 CSS 属性，且仅对根滚动容器（html 或 body）或设置了 overflow: auto | scroll 的**直接可滚动元素**生效。如果容器是 position: relative 但没设 overflow，或者滚动发生在子元素里（比如内部 div 滚动），这两个属性就完全不触发。
- 必须确保目标元素本身可滚动：有明确的
height+overflow-y: auto（或scroll） -
scrollbar-color: #6c6c6c #f1f1f1第一个值是滑块（thumb），第二个是轨道（track）——顺序反了就无效 - 在 Firefox 中，
scrollbar-width: thin仅让宽度变窄，不支持像素值；none会隐藏滚动条但保留滚动能力
WebKit 内核（Chrome/Safari）用 ::-webkit-scrollbar 时定位偏移
当容器设了 position: relative，而内部内容撑高导致出现滚动条，::-webkit-scrollbar 伪元素默认相对于**视口**定位，不是相对于该容器。结果就是滚动条可能贴着整个页面右侧，而不是紧贴你那个 relative 容器的右边界。
- 根本原因：WebKit 的滚动条是渲染在容器外层的“装饰层”，不受容器
transform或position影响 - 唯一可靠解法：确保滚动容器自身是
position: relative，且没有父级transform、filter或will-change——这些会创建新的层叠上下文，干扰滚动条定位 -
::-webkit-scrollbar-track宽度由容器padding-right隐式影响；若容器有padding-right: 20px，滚动条轨道可能被挤偏
自定义滚动条后，JavaScript 获取 scrollTop 失效？
不会。自定义滚动条只是视觉层覆盖，底层滚动行为和 DOM API 完全不变。element.scrollTop、element.addEventListener('scroll', ...) 全部照常工作。但容易误判的是：你以为滚动的是外层容器，其实事件来自内层子元素。
- 检查实际滚动源：用
event.target打印看是不是你预期的那个div - 如果用了
overflow: overlay（旧版 WebKit），滚动条不占空间，scrollHeight计算可能和视觉不符；现代应改用overflow: auto - 在
position: relative容器里监听scroll，要确认该容器确实绑定了滚动事件——它本身得是滚动容器，不是仅仅包着一个滚动子元素
移动端 Safari 不显示自定义滚动条？
iOS Safari 完全忽略 ::-webkit-scrollbar 系列伪元素，也不支持 scrollbar-width。这是硬性限制，不是 bug，也没有 polyfill 能绕过。
- 别浪费时间写 iOS 专用
::-webkit-scrollbar样式，它永远不会生效 - 如需统一视觉，只能用 JavaScript 模拟滚动条（例如
simplebar库），但要注意 touch 事件响应、惯性滚动、性能损耗 - 真机调试时，用
document.documentElement.style.webkitOverflowScrolling = 'touch'可启用原生弹性滚动，但代价是失去所有自定义样式能力
::-webkit-scrollbar-thumb 的 margin，却没发现真正的问题是父容器多了个 transform: translateZ(0)。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
