移动端不能用overflow: hidden直接隐藏滚动条，因其会彻底禁用滚动功能；需通过::-webkit-scrollbar{display: none}（安卓）或透明遮罩覆盖（iOS）实现视觉隐藏并保留滑动能力。
移动端滚动条为什么不能用 overflow: hidden 简单处理
直接给容器加 overflow: hidden 会禁用整个滚动行为，用户根本滑不动内容——这不是“隐藏滚动条”，是“干掉滚动”。真正在意的是视觉上不显示滚动条轨道和 thumb，同时保留手指滑动能力。iOS 和 Android 的滚动机制不同，尤其 iOS WebKit 对 ::-webkit-scrollbar 的支持非常有限（Safari 移动版完全忽略该伪元素），所以 CSS 方案必须分平台考虑。
Android 端可用 ::-webkit-scrollbar 隐藏（仅限 Chrome WebView / 安卓浏览器）
安卓系统下的 Chromium 内核浏览器仍支持该伪类，但必须配合 overflow: auto 或 scroll 才生效：
.scrollable-area {
overflow-y: auto;
-webkit-overflow-scrolling: touch; /* 保持惯性滚动 */
}
<p>.scrollable-area::-webkit-scrollbar {
display: none;
}</p>
- 只对
overflow值为auto、scroll或overlay的元素有效 -
-webkit-overflow-scrolling: touch不可省略，否则安卓下滚动卡顿或无惯性 - 该写法在 iOS Safari 中完全无效，不要指望它跨平台
iOS 真实可行的方案：用透明遮罩层盖住滚动条区域
iOS 滚动条默认宽 8px（竖向），固定在右侧，且无法用 CSS 伪类隐藏。最稳定的做法是用一个绝对定位的 对应 CSS： 如果你在用 Bootstrap 的 滚动容器是外层 真正麻烦的不是怎么写代码，而是 iOS 滚动条位置不可测（比如页面缩放后可能变 9px）、覆盖层在横竖屏切换时需要重算，这些细节很容易被漏掉。<div class="scroll-wrapper">
<div class="scroll-content">...</div>
<div class="scrollbar-cover"></div>
</div>
.scroll-wrapper {
position: relative;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
<p>.scrollbar-cover {
position: absolute;
top: 0;
right: 0;
width: 8px;
height: 100%;
background: transparent;
z-index: 1;
}</p>
z-index 高于内容，且 background 不能是 none（iOS 会透出滚动条）8px 是稳妥值；若容器有 padding-right，需同步调整覆盖层 right 偏移scrollTop）Bootstrap 5 里要特别注意
.table-responsive 的嵌套问题.table-responsive，它内部已设 overflow-x: auto，但默认没开 -webkit-overflow-scrolling，iOS 下横向滚动卡顿明显。直接加覆盖层也不行——因为它的结构是：<div class="table-responsive">
<table>...</table>
</div>
div，但 table 本身会撑宽，导致滚动条出现在 div 右侧。此时必须：
.table-responsive 加 -webkit-overflow-scrolling: touch
并用 CSS 定位到右侧.table-responsive 套进另一个 overflow 容器里，否则层级和尺寸计算会错乱
