移动端隐藏滚动条应采用透明化+动态补偿方案：iOS Safari 16.4+仅支持scrollbar-width:none（需overflow-y:scroll+定高），安卓WebView基本不支持::-webkit-scrollbar；可靠做法是设overflow-y:scroll、-webkit-overflow-scrolling:touch，用::-webkit-scrollbar{width:0;height:0}+透明样式兜底，并JS动态测量滚动条宽度补偿布局偏移。
移动端 ::-webkit-scrollbar 基本无效，别白费劲
你在 iOS Safari 或安卓 Chrome/WebView 里写 ::-webkit-scrollbar { display: none }，大概率没反应——不是你 selector 写错，是这些浏览器压根不解析这个伪元素。iOS 16 之前完全忽略，16.4+ 虽然开始支持 scrollbar-width: none，但也只对 overflow-y: scroll + 定高容器生效，且不兼容旧版微信 WebView、华为/小米自带浏览器。
常见错误现象：滚动条在快速滑动、长按时突然闪现；或写了 width: 0 后，拖拽直接失灵（尤其 iOS 15 某些版本）。
- 安卓 WebView 几乎全不认
::-webkit-scrollbar、scrollbar-color、scrollbar-width - iOS Safari 不支持
display: none于该伪元素，降级用width: 0; height: 0; background: transparent仍可能触发渲染异常 - 内联样式中写伪元素？无效。必须放在
<style>标签或外部 CSS 文件里
scrollbar-width: none 只在 Firefox 和 iOS 16.4+ Safari 有效，且有硬条件
Firefox for Android 支持最稳：scrollbar-width: none 加上 overflow-y: auto 就能干净隐藏，滚动、惯性、键盘导航全保留。但注意它只对设置了 overflow 的**具体滚动容器**生效，比如 .content-scroll，不能写在 html 或 body 上指望全局隐藏。
iOS Safari 16.4+ 才开始有限支持，但有两个雷区必须避开：
立即学习“前端免费学习笔记（深入）”；
- 容器必须用
overflow-y: scroll（auto不行），否则滚动条根本不生成，scrollbar-width失去作用对象 - 容器必须有明确高度（
height、max-height或 flex 布局约束），否则 iOS 可能跳过滚动上下文创建 - 别和
::-webkit-scrollbar混用——Safari 会优先按 WebKit 规则渲染，反而让scrollbar-width被忽略
真正可靠的做法：透明滚动条 + padding 补偿 + 强制滚动上下文
核心思路不是“删除”滚动条，而是让它存在但不可见，并防止内容因滚动条宽度消失而跳动。这是目前真机实测兼容性最好的方案。
- 给容器设
overflow-y: scroll（不是auto），确保滚动上下文被创建 - 加
-webkit-overflow-scrolling: touch（iOS 必须，否则滚动卡顿或闪原生条） - 写
::-webkit-scrollbar { width: 0; height: 0; }+::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb { background: transparent; }作为 Chromium 内核兜底 - 用
padding-right: 12px或margin-right: -12px补偿滚动条占位——但注意：iOS 滚动条宽度不固定（8px/12px/15px 都可能），硬写死值在横屏、缩放、不同设备下易出右侧留白或内容被切 - 更稳妥的补偿方式是 JS 动态测量：
const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth，再注入 style
别碰 overflow: hidden，它禁用的是滚动能力，不是滚动条
写 overflow: hidden 看似“隐藏”，实则是砍掉整个滚动上下文：内容被裁剪、scrollTop 读不到值、scrollIntoView() 静默失败、Tab 键无法聚焦溢出内容、屏幕阅读器跳过区域——这违反 WCAG 2.1 键盘可操作要求，也导致 touch-action 和 pointer-events 继承链断裂，反而更容易在弹窗、键盘唤起时暴露原生滚动行为。
真正要防的不是滚动条本身，而是它消失后引发的布局偏移。很多“隐藏成功”的页面在竖屏转横屏时文字突然换行、卡片错位，就是忘了补偿滚动条宽度变化。
最易被忽略的一点：移动端滚动依赖父层默认的 touch-action: pan-y 和 pointer-events: auto，一旦某层加了 pointer-events: none 或 touch-action: pan-x，再完美的 CSS 隐藏也会让滚动失效——这不是 CSS 问题，是事件捕获链断了。
