移动端灰色滚动条是webkit内核强制渲染的原生样式，无法通过常规::-webkit-scrollbar隐藏；可靠方案是用display: none配合overflow: auto及-webkit-overflow-scrolling: touch。
移动端滚动条为什么是灰色的
灰色滚动条不是“样式”，而是浏览器默认渲染行为：Chrome/Edge/Safari 在移动端（尤其是 iOS Safari）对 overflow: auto 或 scroll 容器会强制显示一个半透明、带圆角、颜色偏灰的原生滚动条，它不响应 ::-webkit-scrollbar 的常规隐藏规则——尤其在内容未满屏、或容器高度未严格约束时，这个灰色条会“闪现”或“残留”。根本原因在于：WebKit 内核在移动端对滚动条的绘制逻辑更激进，且部分版本（如 iOS 16.4+）会忽略 width: 0，只认 display: none。
用 ::-webkit-scrollbar 隐藏但没生效？检查这几点
常见错误是写了伪元素却仍看到灰色条，多半卡在这几个环节：
-
::-webkit-scrollbar必须写在有overflow-x或overflow-y值为auto/scroll的容器上，不能只写在父级或body - 必须同时设置
::-webkit-scrollbar-track和::-webkit-scrollbar-thumb，否则某些 macOS/iOS 版本 fallback 回默认灰色样式 - 不要用
width: 0或height: 0，改用display: none—— 这是 iOS Safari 15.4+ 稳定隐藏的唯一可靠方式 - 如果容器用了
transform、will-change或contain: paint，可能触发独立层叠上下文，导致伪元素不生效；此时加overflow: scroll强制重绘更稳
scrollbar-width: none 在 Firefox 移动版无效？因为不支持
Firefox for Android 不支持 scrollbar-width 控制非根元素滚动条，且它本身在移动端极少显示可见滚动条（靠手势惯性滚动），所以你几乎不用为它单独处理。重点盯住 WebKit 浏览器即可。但要注意：scrollbar-width: none 在桌面 Firefox 生效的前提是：目标元素不能是 html 或 body，且必须显式设 overflow: auto —— 这条规则在移动端无实际意义，可直接忽略。
真正可靠的移动端隐藏方案（含轮播/弹窗等典型场景）
别依赖单一 CSS 属性。复杂场景下，要组合使用：
- 给滚动容器加
overflow: auto（确保可滚），再叠加 WebKit 隐藏规则：.scrollable { overflow-y: auto; -webkit-overflow-scrolling: touch; }<br>.scrollable::-webkit-scrollbar { display: none; }<br>.scrollable::-webkit-scrollbar-track { background: transparent; }<br>.scrollable::-webkit-scrollbar-thumb { background: transparent; } - 轮播图等 JS 接管滑动的场景，直接用
overflow: hidden+touch-action: pan-y更干净，避免滚动条与 Safari 弹性回弹冲突 - 弹窗类浮层若出现灰色条，大概率是 body 滚动被禁用后宽度突变引发重排——此时应配合
body { overflow: hidden; position: fixed; width: 100%; }锁定布局 - iOS Safari 对
overscroll-behavior: contain支持良好，加在容器上能抑制拖拽到边界的灰色拉伸反馈
最易被忽略的是：iOS 上某些 WebView（如微信内置浏览器）会忽略 ::-webkit-scrollbar，此时只能退回到 overflow: hidden + 手势库模拟滚动，或接受那条一闪而过的灰色痕迹。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
