移动端隐藏滚动条需用“透明滚动条+尺寸补偿”策略：显式设overflow-y:scroll、-webkit-overflow-scrolling:touch；动态测滚动条宽并用css变量补偿；全浏览器写scrollbar-width:none、::-webkit-scrollbar{width:0}、-ms-overflow-style:none；加overscroll-behavior:contain防透传。
移动端隐藏滚动条但保留滚动功能，不能依赖 ::-webkit-scrollbar，它在 iOS 和多数安卓 WebView 中基本不生效；真正可行的是“透明滚动条 + 尺寸补偿”组合策略。
为什么 ::-webkit-scrollbar 在移动端几乎无效
iOS Safari（包括微信、QQ 内核）和华为/小米等安卓 WebView 完全忽略该伪类；即使写了 width: 0 或 display: none，滚动条仍可能在长按、快速滑动或焦点触发时闪现；iOS 15+ 后支持进一步弱化，background: transparent 都可能被无视。
- 硬写
::-webkit-scrollbar { display: none }在 iPhone 上大概率失效，且部分旧版 Safari 会因此禁用拖拽滚动 - 安卓厂商浏览器常强制渲染灰色窄条，CSS 隐藏规则形同虚设
- 该伪类只对有明确
height/max-height且overflow-y: auto或scroll的容器才可能渲染——但即便满足，也大概率不执行
overflow-y: scroll 是必要前提，不是可选项
移动端必须显式设 overflow-y: scroll（不能用 auto），否则 iOS 可能根本不创建滚动上下文，导致无法拖动、scrollTop 失效、scrollIntoView() 静默失败。
-
overflow: hidden会彻底砍掉滚动能力，不是“隐藏”，是“禁用”——内容被裁剪、键盘方向键和屏幕阅读器无法访问溢出区域 -
overflow: auto在 iOS 上行为不稳定：有时不渲染滚动条，导致用户误以为不可滚；有时又在拉到底部时意外触发弹性回弹并暴露原生条 - 必须搭配
-webkit-overflow-scrolling: touch才能保证 iOS 滚动流畅性，否则惯性滚动卡顿
用 padding-right 补偿滚动条宽度，而非硬编码 12px
滚动条宽度不是固定值：iPhone SE 可能是 8px，iPad Pro 可能是 15px，安卓各厂从 6px 到 17px 不等；硬写 padding-right: 12px 会导致右侧留白或内容被切。
- 推荐方案：用 JavaScript 动态测量滚动条宽度，再注入 CSS 变量或内联样式，例如：
document.documentElement.style.setProperty('--scrollbar-width', getScrollbarWidth() + 'px') - 若不用 JS，至少用
padding-right: calc(100% - 100% + 12px)这类写法避免被预处理器误删，但仍是妥协方案 - 更稳妥的视觉补偿是
margin-right: -12px+padding-right: 12px组合，抵消占位又不撑开容器
Firefox 和跨浏览器兜底必须写全
Firefox 用 scrollbar-width: none，Chrome/Safari/Edge 用 ::-webkit-scrollbar 系列，旧 IE/Edge 用 -ms-overflow-style: none——三者缺一不可，且都必须作用于已设 overflow 的容器上。
-
scrollbar-width: none只对 Firefox 64+ 有效，且仅对根元素或设置了overflow: auto/scroll的块级元素生效 -
::-webkit-scrollbar-track和::-webkit-scrollbar-thumb必须同时设background: transparent，否则某些 Android 浏览器仍显示残影 - 别忘了加
overscroll-behavior: contain防止弹窗滚动到底部时透传到页面，这是移动端高频问题
最易被忽略的点：滚动条“视觉消失”不等于“交互消失”——鼠标滚轮、触控板惯性、键盘方向键、甚至语音助手滚动指令依然有效；但如果你同时用了 pointer-events: none 或覆盖了整个容器的遮罩层，这些能力就真没了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
