移动端不能用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;
}- 只对
overflow值为auto、scroll或overlay的元素有效 -
-webkit-overflow-scrolling: touch不可省略，否则安卓下滚动卡顿或无惯性 - 该写法在 iOS Safari 中完全无效，不要指望它跨平台
iOS 真实可行的方案：用透明遮罩层盖住滚动条区域
iOS 滚动条默认宽 8px（竖向），固定在右侧，且无法用 CSS 伪类隐藏。最稳定的做法是用一个绝对定位的 <div> 盖住它：<pre class='brush:php;toolbar:false;'><div class="scroll-wrapper">
<div class="scroll-content">...</div>
<div class="scrollbar-cover"></div>
</div></pre><p>对应 CSS：</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill4914" title="VPS Bootstrap"><img
src="https://img.php.cn/upload/skill/000/000/081/179025304626966.jpg" alt="VPS Bootstrap" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill4914" title="VPS Bootstrap">VPS Bootstrap</a>
<p>从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。</p>
</div>
<a href="/xiazai/skill4914" title="VPS Bootstrap" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div><pre class='brush:php;toolbar:false;'>.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;
}</pre><ul>
<li>覆盖层必须设 <code>z-index 高于内容，且 background 不能是 none（iOS 会透出滚动条）
8px 是稳妥值；若容器有 padding-right，需同步调整覆盖层 right 偏移scrollTop）Bootstrap 5 里要特别注意 .table-responsive 的嵌套问题
如果你在用 Bootstrap 的 .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 - 手动添加同级
<div class="scrollbar-cover"></div>并用 CSS 定位到右侧 - 避免把
.table-responsive套进另一个overflow容器里，否则层级和尺寸计算会错乱
真正麻烦的不是怎么写代码，而是 iOS 滚动条位置不可测（比如页面缩放后可能变 9px）、覆盖层在横竖屏切换时需要重算，这些细节很容易被漏掉。
