scrollbar-width在移动端基本无效，因ios safari和android chrome等主流浏览器根本不支持该属性，无论设为thin或none均被忽略，规范层面未强制要求移动端实现，原生滚动条为overlay类型且宽度由系统硬编码。
scrollbar-width 在移动端基本无效，别白费力气写它。
移动端浏览器（iOS Safari、Android Chrome）根本不支持 scrollbar-width，无论你设成 thin 还是 none，都会被完全忽略。这不是兼容性问题，是规范层面的缺席——CSS Scrollbars Module Level 1 明确不强制要求移动端实现该属性。
为什么移动端不能用 scrollbar-width？
根本原因有三个：
- iOS Safari 和大多数 Android WebView 不解析
scrollbar-width声明，连auto都当不存在 - 移动端滚动条本身就是“overlay”类型：默认隐藏、滑动时浮现、宽度由系统硬编码（iOS 约 8px，Android 通常更细），无法通过 CSS 干预
-
scrollbar-color同样在 iOS 上无效，none也不能真正隐藏——用户仍可通过手势拖拽滚动，视觉上只是没显示条
移动端滚动条宽度能控制吗？
不能直接控制宽度，但可以间接影响视觉感知：
- 用
overflow: hidden+ JavaScript 模拟滚动，彻底绕过原生滚动条（代价是失去惯性滚动、缩放、可访问性支持） - 对容器加
padding-right: 12px或margin-right: -12px补偿 iOS 默认滚动条占位（仅对固定高度 +overflow-y: auto有效） - 用
-webkit-overflow-scrolling: touch（已废弃但仍有残留作用）提升滚动顺滑度，不影响宽度 - 接受现实：iOS 下滚动条宽度≈8px 且不可改，Android 下更细但也不可控
哪些写法在移动端会失效？
以下全部无效，检查工具里能看到声明被划掉或根本没解析：
-
scrollbar-width: thin—— iOS/Android 都无视 -
scrollbar-width: none—— iOS 仍显示浮动条，Android 可能短暂闪现 -
scrollbar-color: #666 #eee—— iOS 完全不生效，Android 部分版本支持但不稳定 -
::-webkit-scrollbar { width: 6px }—— iOS Safari 不支持该伪元素，Android Chrome v120+ 才开始有限支持
simplebar 或 virtual-scroller）接管滚动逻辑，而不是寄希望于 CSS 属性。原生滚动条在移动端就是个“只读黑盒”，它的宽度、颜色、出现时机，全由系统说了算。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
