移动端::-webkit-scrollbar无效，因iOS Safari及多数Android浏览器不支持该伪元素；真正有效的是overflow:hidden配合内层滚动+视觉遮盖，或使用overscroll-behavior:contain抑制回弹。
移动端滚动条为什么加 ::-webkit-scrollbar 没用
因为绝大多数 Android 浏览器和 iOS Safari **根本不支持** ::-webkit-scrollbar 伪元素——它只在桌面 Chrome、Edge 和部分旧版 Android WebView 中生效。你在 iPhone 上写 display: none 到 ::-webkit-scrollbar，完全不会有任何效果，页面照常显示原生滚动条（或更常见的是：压根不显示任何自定义样式，连隐藏都做不到）。
真正起作用的方式是靠 overflow 行为控制 + 视觉遮盖，而不是试图“删除”一个根本不存在的 DOM 节点。
用 overflow: hidden 配合内层滚动是最可靠方案
核心思路：外层容器裁剪溢出，内层元素自己负责滚动，滚动条自然被外层挡住。适用于列表、卡片流、横向滚动区等常见场景。
- 外层容器设
overflow: hidden，高度/宽度固定（或由 flex/grid 约束） - 内层滚动内容设
overflow-y: auto（竖向）或overflow-x: auto（横向），并添加-webkit-overflow-scrolling: touch（iOS 必加，否则卡顿） - 为防 Safari 滚动穿透，外层建议加
position: relative，内层加position: absolute或用 transform 触发硬件加速
.scroll-container {
height: 200px;
overflow: hidden;
position: relative;
}
.scroll-content {
height: 100%;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
position: absolute;
width: 100%;
}iOS Safari 隐藏滚动条的唯一有效 CSS 方式
仅限 iOS 16.4+，且只对 <textarea></textarea> 和 contenteditable 元素生效：scrollbar-width: none 和 scrollbar-color: transparent transparent 完全无效；但可以尝试：
立即学习“前端免费学习笔记（深入）”；
- 给可滚动元素加
scrollbar-width: none（Firefox 有效，但 iOS Safari 忽略） - 真正能起效的是
overscroll-behavior: contain—— 它不隐藏滚动条，但能禁用下拉回弹和滚动传递，视觉上更“干净” - 如必须视觉隐藏，只能 JS 检测
isIOS后动态插入遮罩层（比如绝对定位的div盖住右侧 12px），但会牺牲可访问性
横向滚动时滚动条卡在底部？检查 white-space 和 flex-shrink
横向滚动容器里文字换行或子项收缩，会导致内容高度塌陷，滚动区域计算异常，进而让滚动条错位甚至消失。典型表现是：滑到最右，滚动条还在中间，或拖不动。
- 确保子项有
flex-shrink: 0（Flex 布局下）或white-space: nowrap（文本类） - 父容器设
scroll-snap-type: x mandatory可辅助对齐，但不是解决滚动条的根本办法 - Android Chrome 有时需要
transform: translateZ(0)强制触发合成层，修复滚动条渲染错位
实际项目里，“隐藏滚动条”往往只是表象需求，背后真正要解决的是交互干扰或视觉一致性。iOS 不给你操作滚动条样式，就是不想你动；强行遮盖或禁用，可能让视力障碍用户无法感知滚动状态。留 4px 透明滚动条（scrollbar-color: rgba(0,0,0,0.01) rgba(0,0,0,0)）比彻底消失更稳妥。
