各浏览器滚动条样式需分层适配：chrome/edge/safari（新版）用::-webkit-scrollbar系列；firefox 64+用scrollbar-width和scrollbar-color；safari 16.4+开始有限支持::scrollbar-thumb；ios safari滚动条默认不可见。
Chrome/Firefox/Safari 的滚动条伪元素不统一
各浏览器对自定义滚动条的支持靠的是不同前缀的伪元素，不是所有浏览器都支持 ::-webkit-scrollbar，Firefox 从 64+ 开始用 ::scrollbar（需配合 scrollbar-width 和 scrollbar-color），Safari 则长期只认 WebKit 前缀且部分版本不支持轨道拖动反馈。
实操建议：
- 必须优先写
::-webkit-scrollbar系列规则，覆盖 Chrome、Edge、新版 Safari - Firefox 不识别 WebKit 伪元素，得单独加
scrollbar-width: thin | auto | none控制宽度，scrollbar-color: <thumb><track></track></thumb>控制颜色 - Safari 16.4+ 才开始有限支持
::scrollbar-thumb等标准伪类，旧版仍只能靠::-webkit-scrollbar - 不要试图用 JS 检测伪元素是否生效——它无法通过
getComputedStyle读取，只能靠浏览器 UA + 版本号条件加载
WebKit 伪元素的四个关键组合不能漏
::-webkit-scrollbar 本身只是容器，真正起作用的是它的四个子伪元素：轨道、滑块、上下箭头、角落。漏掉任意一个，样式可能意外回退到系统默认。
常见错误现象：滚动条变细了但颜色没变，或滑块消失只剩轨道阴影。
实操建议：
- 必须同时声明
::-webkit-scrollbar（设宽高）、::-webkit-scrollbar-track（轨道背景）、::-webkit-scrollbar-thumb（滑块）、::-webkit-scrollbar-corner（右下角交汇处，否则出现白块） -
::-webkit-scrollbar-thumb:hover可以加过渡，但transition在某些 Safari 版本中无效，建议用background渐变代替纯色变化 - 避免给
::-webkit-scrollbar-track设border，部分 Edge 版本会渲染错位；改用box-shadow模拟边框更稳
Firefox 的 scrollbar-width 不是万能开关
scrollbar-width: thin 看似简单，但它只控制宽度策略，不接管样式；想改颜色必须配 scrollbar-color，而且这两个属性只对根滚动容器（html）和 overflow: auto/scroll 的块级元素生效，对 textarea 或自定义 div 滚动区无效。
使用场景：适合全局轻量定制，比如让整个页面滚动条变细+灰阶配色。
实操建议：
- 在
html或目标容器上直接写：scrollbar-width: thin; scrollbar-color: #999 #f5f5f5; - 不要指望它影响
iframe内部滚动条——那是独立文档树，需在 iframe 页面内单独设置 - 当和 WebKit 规则共存时，Firefox 会忽略所有
::-webkit-*，但 Chrome/Safari 会忽略scrollbar-width，所以两者可安全并存，无需媒体查询隔离
移动端 Safari 的滚动条几乎不可见
iOS/iPadOS 的 Safari 默认隐藏滚动条，即使写了 ::-webkit-scrollbar 也只在滚动瞬间闪现，且不响应 hover 或 active 状态。这不是 bug，是系统级行为。
性能 / 兼容性影响：强行用 overflow: scroll + -webkit-overflow-scrolling: touch（已废弃）可能触发卡顿，尤其在复杂列表中。
实操建议：
- 放弃在 iOS 上“稳定显示”滚动条，专注优化滚动惯性与回弹反馈
- 如需视觉提示，改用右侧固定指示器（例如小圆点进度条），用 JS 监听
scroll事件计算位置 - 测试时务必真机验证——模拟器常误报滚动条可见性
最麻烦的其实是混合场景：比如一个 div 在桌面端要细条+圆角，在 Firefox 里要单色，在 iOS 上干脆不处理。这时候得接受「分层降级」——WebKit 规则打底，Firefox 属性补缺，iOS 交给系统。别强求一刀切。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
