手机端滚动条样式常失效，因ios safari和android chrome默认隐藏原生滚动条且不支持::-webkit-scrollbar；可用属性仅overscroll-behavior和scrollbar-width（后者仅firefox有效）；自定义外观须用js模拟滚动，但存在兼容性、性能及无障碍问题。
手机端滚动条样式为什么经常失效
因为绝大多数移动端浏览器（包括 iOS Safari 和 Android Chrome）默认隐藏原生滚动条，且不支持 ::webkit-scrollbar 伪元素。你写的 ::-webkit-scrollbar 规则在 iPhone 上根本不会生效，不是写错了，是浏览器压根不认。
只有少数 Android WebView 或启用了实验性标志的 Chrome 可能部分支持，但不可靠。所以别在 body 或 div 上硬套 ::-webkit-scrollbar 期待它出现在真机上。
真正能控制滚动行为的只有 overscroll-behavior 和 scrollbar-width
这两个属性才是移动端实际可用的“滚动条相关”CSS 控制项，但注意：它们不改变外观，只影响行为或粗略开关：
-
overscroll-behavior: contain可阻止下拉刷新或滚动穿透（比如弹窗里滚动到底还触发背景页滚动） -
scrollbar-width: none在 Firefox for Android 有效，但 Safari 和 Chrome 移动版无视它 -
scrollbar-color: transparent transparent同样仅限 Firefox，且只是配色，不是完全隐藏
换句话说：你想“修改颜色/宽度/轨道”，在当前主流移动浏览器中没有标准、稳定、跨平台的 CSS 方案。
如果必须自定义滚动条外观，只能用 JS 模拟滚动容器
原理是禁用原生滚动（overflow: hidden），用 touchstart/touchmove 监听手势，手动更新容器 transform: translateY()。这时候你就能完全控制“滚动条”的 DOM 结构和样式。
实操要点：
- 用
position: absolute叠加一个可拖拽的div作为滚动条轨道 + thumb - thumb 高度需按内容高度 / 容器高度动态计算，否则比例失真
- 必须监听
touch-action: none防止系统默认滚动抢事件 - 要考虑惯性滚动（velocity tracking +
requestAnimationFrame模拟减速） - 无障碍支持弱——screen reader 很难识别这种非原生滚动
现有轻量库如 simplebar 或 overlay-scrollbars 做了封装，但它们在 iOS 上仍可能因 touch-action 兼容问题导致卡顿或双滚动。
iOS Safari 的特别限制：连 overflow: scroll 都可能被忽略
如果你给某个 div 设置了 overflow-y: scroll 却无法滚动，大概率是因为它父容器缺少 -webkit-overflow-scrolling: touch（已废弃但 iOS 15 前仍需）或现代等效写法：
- 确保该容器有明确高度（
height或max-height），百分比高度在 flex 布局中常失效 - 添加
will-change: scroll-position有时能激活硬件加速 - 避免在滚动容器上同时设
transform或filter，这会创建新层叠上下文并破坏滚动捕获
最隐蔽的坑：iOS Safari 对 touchmove 事件的默认行为拦截越来越激进，哪怕你只是想做自定义滚动，也得在事件回调里显式调用 event.preventDefault()，且要加 { passive: false } —— 否则监听器会被浏览器静默降级为 passive，导致无法阻止默认滚动。
滚动条样式这件事，在手机端本质上是个「假装能控制」的问题：你能干预的只有行为和容器，真正的滚动条 UI 仍由系统掌管，强行覆盖的成本远高于收益。除非设计规范强制要求，否则建议接受原生表现。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
