移动端隐藏滚动条不能只靠::-webkit-scrollbar，因iOS Safari完全不支持；需组合使用overflow-y: auto、scrollbar-width: none等属性，并针对Safari“默认不渲染”的特性优化视觉引导。
移动端隐藏滚动条为什么不能只靠 ::-webkit-scrollbar
因为 iOS Safari 从始至终不支持 ::-webkit-scrollbar，哪怕写上 display: none 也完全无效。Android Chrome 和新版 Edge（Blink 内核）能响应，但 iOS 用户占很大比例，单靠 WebKit 伪元素会漏掉关键平台。Firefox for iOS 已停更，实际只需考虑 Safari 和 Android WebView 场景。
真正起效的组合是：overflow 必须存在 + 浏览器专属属性必须写全：
-
scrollbar-width: none：Firefox 桌面和部分 Android WebView 支持，iOS Safari 忽略但无害 -
-ms-overflow-style: none：旧版 IE/Edge，现基本可删，但留着不报错 -
overflow: -moz-scrollbars-none：已废弃，不用加
重点：Safari 的“隐藏”其实是“默认不显示”，它压根不渲染滚动条，所以你只要确保内容能滚、视觉不突兀就行——不是靠 CSS 隐藏，而是靠它本就不画。
overflow: hidden 和隐藏滚动条是两回事，别混用
写 overflow: hidden 会直接裁剪溢出内容，用户连滚都滚不了。而你要的是“能滑、看不见”。正确前提只有两个：
立即学习“前端免费学习笔记（深入）”；
- 容器必须有明确的
height或max-height（否则overflow不触发） -
overflow-y: auto或overflow-y: scroll必须显式设置（auto更安全，没溢出时不占空间）
常见翻车点：给 加 overflow: hidden 想禁滚动，结果整个页面锁死。真要禁滚动，该用 document.body.style.overflow = 'hidden' + 同时保存 scrollTop 值，避免弹窗关闭后页面跳回顶部。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
移动端轮播/侧边栏等场景，优先考虑不用原生滚动
很多所谓“隐藏滚动条”的需求，本质是 JS 已接管手势（如 touchstart/touchmove），原生滚动反而干扰体验。这时最干净的做法是彻底关掉它：
- 父容器设
overflow: hidden+touch-action: pan-y（允许上下滑，禁左右滚） - 内容区用
transform: translateX()移动，而非改scrollLeft - 横向布局用
display: flex+flex-wrap: nowrap，避免文本换行撑宽
这样既没滚动条，也没兼容性问题，还省去所有浏览器前缀的维护成本。比如侧边菜单展开时，用 transform 推入视图，比依赖 overflow-x: scroll 然后拼命藏滚动条靠谱得多。
美化滚动条在移动端基本没意义，但可以加视觉引导
iOS Safari 不支持任何 ::-webkit-scrollbar 样式；Android Chrome 虽支持，但用户手指一划就消失，样式根本来不及看。强行加 width: 8px 或 background: #ccc 只会让 Android 用户偶尔看到一闪而过的丑条，得不偿失。
更实用的做法是用 CSS 暗示“这里可滑”：
- 容器底部加渐变遮罩：
mask-image: linear-gradient(to bottom, black 80%, transparent) - 右侧加轻微阴影：
box-shadow: inset -4px 0 8px -4px rgba(0,0,0,0.1) - 首尾项加
padding留白，避免内容顶到边缘
这些不依赖滚动条，所有移动端浏览器都认，而且符合用户对“可滑区域”的直觉认知。
最易被忽略的一点：iOS 上 scrollbar-width: none 无效，::-webkit-scrollbar 无效，-ms-overflow-style 无效——它就是不显示。所以别在 Safari 上调试滚动条样式，那是在调空气。真要统一行为，要么接受“iOS 无滚动条、Android 有但藏掉”，要么引入 SimpleBar 这类 JS 库，在 Android 渲染自定义条，iOS 直接退化为无条可滑，再配视觉提示。
