移动端隐藏滚动条但保持滚动功能的可靠方案是用透明滚动条加padding/margin补偿，而非依赖失效的::-webkit-scrollbar；需设overflow-y: scroll、-webkit-overflow-scrolling: touch，并动态测量滚动条宽度以精准补偿。
移动端隐藏滚动条但保持滚动功能的CSS写法
直接给容器加 overflow: scroll 并配合 -webkit-scrollbar 隐藏是无效的——iOS Safari 和多数安卓浏览器根本不支持该伪元素。真正可靠的方式是用覆盖式遮罩 + 透明滚动条，而不是试图“禁用”或“删除”滚动行为。
为什么 ::-webkit-scrollbar 在移动端基本失效
这个伪类只在部分桌面 Chrome/Edge 有效；iOS（包括微信内核、QQ 浏览器）和大部分安卓 WebView 完全忽略它。即使写了 display: none 或 width: 0，滚动条依然可能在长按、快速滑动或焦点触发时短暂闪现，且无法控制其颜色或尺寸。
- iOS 15+ 开始对
::-webkit-scrollbar支持更弱，甚至会忽略background: transparent - 某些安卓厂商浏览器（如华为、小米）会强制显示灰色窄条，无视 CSS 隐藏规则
- 用
overflow: hidden直接关滚动，就彻底失去功能——这不是“隐藏”，是“禁用”
推荐方案：用透明滚动条 + padding/margin 补偿视觉干扰
核心思路是让滚动条存在但不可见，同时避免它挤占内容或导致布局跳动。关键不是消灭它，而是让它“不被感知”。
- 给可滚动容器设
overflow-y: scroll（不能用 auto，否则 iOS 可能不渲染滚动条，导致无法拖动） - 加
-webkit-appearance: none和scrollbar-width: none（Firefox 支持）作为辅助 - 用
padding-right: 12px（或margin-right: -12px）抵消滚动条宽度，防止内容被遮挡或抖动 - 必要时用
overscroll-behavior: contain阻止父容器透传滚动（比如弹窗内滚动到底部再拉，不触发页面回弹）
示例：
.scroll-container {
overflow-y: scroll;
-webkit-overflow-scrolling: touch; /* iOS 滚动流畅性 */
scrollbar-width: none; /* Firefox */
}
.scroll-container::-webkit-scrollbar {
width: 0;
height: 0;
}
.scroll-container {
padding-right: 12px; /* 补偿 iOS 默认 12px 滚动条宽度 */
}
需要特别注意的兼容细节
滚动条宽度不是固定值：iOS 不同版本、不同设备（iPhone SE vs iPad）、不同缩放比例下，滚动条宽度可能为 8px、12px 或 15px；安卓更是五花八门。硬写 padding-right: 12px 在某些场景下会导致右侧留白或内容被切。
- 更稳妥的做法是用 JS 动态测滚动条宽度：
document.documentElement.clientWidth - document.body.offsetWidth，然后注入内联样式 - 如果容器有
border-radius或overflow: hidden父级，滚动条可能被裁切出奇怪形状，此时建议改用mask或clip-path遮罩（但需测试 iOS 支持度） - 微信内置浏览器（X5 内核）对
-webkit-overflow-scrolling: touch支持不稳定，有时需额外加transform: translateZ(0)触发硬件加速
滚动条本身是交互必需的视觉反馈，完全“看不见”反而影响可用性——真要极致隐藏，得接受部分用户滚动体验变差，这是权衡点，不是技术死角。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
