手机端::-webkit-scrollbar无效是常态，因安卓WebView和iOS Safari大多不支持；可靠方案只有禁用原生滚动并用JS模拟，或用CSS scrollbar-width:none（仅iOS 16.4+且需overflow-y:scroll+定高）及透明遮罩。
手机端用 ::-webkit-scrollbar 无效？这是常态
因为绝大多数安卓 WebView 和 iOS Safari 不支持 ::-webkit-scrollbar 伪元素，哪怕加了 display: none 或 width: 0 也完全没反应。这不是你写错了，是浏览器压根不解析这个规则。
真正起作用的方式只有两种：禁用滚动行为，或用覆盖遮罩“假装”没滚动条。
- iOS 16+ 的 Safari 支持
scrollbar-width: none（仅 Firefox 原生支持，Safari 是后来加的兼容性补丁，但只对overflow: auto/scroll容器生效） - 安卓 Chrome/WebView 几乎全不认任何 scrollbar 相关 CSS，包括
scrollbar-color和scrollbar-width - 别试
*::-webkit-scrollbar全局重置——既无效，又可能触发某些低端安卓机型的渲染 bug
用 overflow: hidden + JS 模拟滚动是最稳方案
当容器内容实际需要滚动，但 UI 设计要求“看起来没滚动条”，就得绕过 CSS 限制，用 JavaScript 控制 touch 行为。
核心思路：把原生滚动关掉，用 touchstart/touchmove 手动更新 transform: translateY()，同时禁用默认滚动（event.preventDefault()）。
- 必须给容器设
overflow: hidden，否则原生滚动和手动滚动会打架 - 监听
touchmove时要加{ passive: false }，不然preventDefault()在 Chrome 中会被忽略 - 记得记录初始
touchstart.clientY和当前位移，否则拖拽会跳 - 别忘了边界判断：不能拖出顶部或底部空白，否则露出背景色，一眼就露馅
示例关键片段：
translateY(${Math.max(-maxUp, Math.min(0, newTop))}px)
scrollbar-width: none 在 iOS 上能用，但有硬条件
这个属性在 iOS 16.4+ 的 Safari 中确实生效，但前提是容器必须满足两个条件：一是 overflow-y: scroll（不能是 auto），二是必须有明确的高度限制（比如 height: 300px 或 max-height）。
- 写成
overflow: scroll不行——必须明确指定方向，overflow-y: scroll - 如果父容器高度靠内容撑开（
height: auto），scrollbar-width: none会被直接忽略 - iOS 下它只隐藏滚动条视觉，滚动行为照常，这点和桌面端一致
- 别指望安卓 WebView 认这个——连 Chromium 115 都还没实现该属性的非 WebKit 版本
用透明遮罩盖住滚动条区域最简单，但要注意留白
滚动条宽度在不同设备上不固定：iOS 一般 0px（本来就不显示），安卓 Chrome 默认约 8–12px，部分厂商定制系统可能更宽。直接盖一个 width: 12px 的 div 往右边一贴，容易切掉内容最后一列文字。
- 遮罩层必须用
position: absolute，且z-index高于内容，但不能挡住可点击区域（比如右侧图标） - 推荐用
right: 0+top: 0+bottom: 0+width: 12px，背景设为父容器同色，而非透明——避免透出下层内容 - 如果容器有圆角（
border-radius），遮罩也要同步加，否则边缘会漏出滚动条 - 这个方法治标不治本：滚动条物理还在，只是看不见；用户双指缩放或调试时仍可能暴露
滚动条这事，本质是「浏览器决定要不要给你控制权」。iOS 给了一点缝，安卓基本关死门。真要稳定隐藏，别死磕 CSS，老老实实接管 touch 流程——边界判断和 passive 选项，漏一个就卡顿或失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
