移动端隐藏滚动条但保持可滚动需用 width: 4px + transparent 方案，禁用 overflow: hidden；ios 旧版不支持 ::-webkit-scrollbar；须设 height/max-height 和 overflow-y: auto，并检查父级 overscroll-behavior。
移动端滚动条“隐藏但可滚”不能靠 overflow: hidden，它会直接禁用所有滚动行为——键盘、触控板、手势、scrollIntoView() 全部失效。
为什么 overflow: hidden 在移动端尤其危险
它不只是视觉裁剪：iOS Safari 会因此触发弹性回弹（overscroll bounce），并在回弹结束时意外显示原生滚动条；Android WebView 中则可能让 scrollTop 变成只读、scrollBy() 静默失败。更关键的是，屏幕阅读器会完全跳过溢出内容，无障碍检测工具直接报错 focusable content is not reachable。
::-webkit-scrollbar 在 iOS 上基本无效
iOS Safari（尤其是 iOS 15 及更早）完全忽略 ::-webkit-scrollbar 系列伪元素，写 display: none 或 width: 0 都不生效。iOS 16.4+ 才开始有限支持，但仍不稳定。所以别在 @supports 或媒体查询里对 iOS 单独写这套规则——它不会渲染，也不报错，只是白写。
真正能用的移动端方案：宽度压缩 + 透明化 + 滚动上下文兜底
这是目前兼容 iOS 14–17、Android Chrome、Samsung Internet 的最小可行方案：
- 容器必须显式设置
height或max-height，且overflow-y: auto（scroll也可，但auto更节能） -
::-webkit-scrollbar不设display: none，改用width: 4px+background: transparent—— 宽度保留 4px 是为了 macOS/iOS 触控板拖拽热区不丢失，transparent消除视觉残留 - 必须同时定义
::-webkit-scrollbar-track和::-webkit-scrollbar-thumb，否则旧版 Safari 会漏出灰色轨道底色 - Firefox for Android 需补
scrollbar-width: none，但它只对设置了overflow的块级元素生效，不能写在html或body上试图全局控制
示例代码：
.scroll-area {
height: 300px;
overflow-y: auto;
scrollbar-width: none; /* Firefox */
}
.scroll-area::-webkit-scrollbar {
width: 4px;
}
.scroll-area::-webkit-scrollbar-track {
background: transparent;
}
.scroll-area::-webkit-scrollbar-thumb {
background: transparent;
border-radius: 2px;
}
注意：如果滚动区域是 position: absolute 或用了 contain: paint，需检查 computed style 中 overflow-y 是否仍为 auto —— 这些属性可能被层叠覆盖，导致伪元素根本不生成。
容易被忽略的嵌套干扰：父容器的 overscroll-behavior
即使上述 CSS 全写对了，滚动仍“卡住”或“没反应”，大概率是父容器（比如 body 或模态框 wrapper）加了 overscroll-behavior: contain 或 none，拦截了子容器的滚动事件。打开 DevTools → Elements → 选中目标元素 → 查看 Computed 面板里的 overflow-y 和 overscroll-behavior 值，确认滚动上下文真实存在且未被阻断。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
