不能，绝大多数移动端浏览器（包括iOS Safari、Android Chrome低版本及微信内置浏览器）不支持::-webkit-scrollbar及其子伪元素，iOS Safari完全忽略该规则，Android Chrome仅95+版本在实验性标志启用时极有限支持，稳定环境仅限桌面Chromium系浏览器。
移动端能用 ::-webkit-scrollbar 吗？
不能，绝大多数移动端浏览器（包括 iOS Safari、Android Chrome 低版本、微信内置浏览器）不支持 ::-webkit-scrollbar 及其子伪元素。iOS Safari 完全忽略该系列规则；Android Chrome 从 90+ 版本起有限支持，但仅限于部分安卓原生 WebView 场景，普通网页仍不可靠。这不是写法问题，是渲染引擎限制——WebKit for iOS 硬件加速滚动路径绕过了传统滚动条绘制逻辑。
哪些场景下 ::-webkit-scrollbar 实际生效？
只在明确满足以下全部条件时才可能生效：
- iOS 设备上使用 PWA 模式（
display: standalone）且运行在较新系统（iOS 16.4+），极少数机型有微弱支持迹象（非稳定） - Android 设备上通过 Chrome 95+ 打开网页，并启用
chrome://flags/#enable-scroll-customization实验性标志（用户不可控） - 桌面端 Chromium 内核浏览器（Chrome / Edge / 新版 Opera）——这是唯一稳定可用的环境
- Electron 或 Capacitor/Cordova 封装的 App 中，若 WebView 配置为 desktop-style 渲染（需主动降级滚动行为）
想在移动端“看起来”有自定义滚动条，有什么替代方案？
本质是放弃原生滚动条控制，改用 JavaScript 模拟滚动容器。关键点不是“美化”，而是“接管”：
- 用
overflow: hidden隐藏原生滚动条，再用position: absolute绘制一个假滑块（track + thumb） - 监听
touchstart/touchmove手势，计算偏移并手动更新容器scrollTop或transform: translateY() - 必须处理惯性滚动（
requestAnimationFrame+ 速度衰减模拟），否则体验断裂 - 注意 iOS 的
touch-action: none会禁用双指缩放和部分手势，慎用；推荐用touch-action: pan-y保底 - 性能敏感：避免在
touchmove中触发重排，thumb 位置应通过transform更新
示例骨架：
.scroll-container { overflow: hidden; position: relative; }
.scroll-content { transform: translateY(0); }
.scroll-thumb { position: absolute; top: 0; right: 4px; width: 6px; background: #888; border-radius: 3px; }
为什么不要强行 hack ::-webkit-scrollbar 移动端？
因为失败是确定的，且会带来隐蔽副作用：
立即学习“前端免费学习笔记（深入）”；
- 在 iOS 上写一堆
::-webkit-scrollbar-track规则，CSS 文件体积白增，毫无效果 - 某些安卓 WebView 会因解析未知伪类而轻微卡顿（尤其低端机）
- 后续接入第三方 UI 库（如 Ionic、Vant）时，其内部滚动优化可能与你的 CSS 冲突，debug 成本陡增
- 最麻烦的是：它让你误以为“样式可控”，从而跳过对滚动性能、可访问性（
aria-hidden、键盘导航）、触控反馈的真实打磨
真正在意移动端滚动体验，重点不在 scrollbar 样式，而在滚动是否顺滑、是否响应及时、是否支持回弹、是否适配不同 DPI 屏幕——这些都和 ::-webkit-scrollbar 无关。
