overflow-x: hidden会同时禁用滑动，因其规范定义为“不可见即不可交互”；要实现视觉隐藏但保留滑动功能，须用overflow-x: auto配合scrollbar-width: none（Firefox）和::-webkit-scrollbar {width: 0}（Chrome/Edge/Safari）。
为什么 overflow-x: hidden 会同时禁用滑动？
直接写 overflow-x: hidden 确实能隐藏滚动条，但浏览器会连带禁用横向拖拽和触控滑动——因为 CSS 认为“不可见 = 不可交互”。这不是 Bug，是规范行为。真正要的是“视觉隐藏 + 功能保留”，得绕过默认渲染逻辑。
用 scrollbar-width 和 ::-webkit-scrollbar 分别处理 Firefox 和 Chrome/Edge
现代浏览器不共享同一套滚动条样式 API，必须分情况覆盖：
- Firefox：设
scrollbar-width: none（仅隐藏，不影响滚动） - Chrome / Edge / Safari：用伪元素
::-webkit-scrollbar把宽度设为0，再配合overflow-x: auto - 必须加
overflow-x: auto或scroll，否则内容不会产生可滚动容器
.no-scrollbar {
overflow-x: auto;
scrollbar-width: none; /* Firefox */
}
.no-scrollbar::-webkit-scrollbar {
width: 0;
height: 0;
}
Bootstrap 场景下注意 .table-responsive 的干扰
Bootstrap 的 .table-responsive 默认加了 overflow-x: auto 和内边距，但它没处理滚动条隐藏逻辑。如果直接套用，会看到原生滚动条。解决方案是覆盖它的样式，而不是替换类名：
- 不要删掉
.table-responsive，它负责响应式断点和 padding - 额外加一个自定义类（如
.no-scrollbar），并确保它的 CSS 优先级 ≥ Bootstrap - 如果用 Sass，可在
@importBootstrap 后重写；纯 CSS 则用更具体的选择器，比如.table-responsive.no-scrollbar
移动端触控滑动失效？检查 -webkit-overflow-scrolling 和父容器高度
iOS Safari 有时在隐藏滚动条后拒绝响应手指拖拽，常见原因是：
- 父容器没设明确高度或
min-height，导致滚动上下文丢失 - 旧版 iOS 需要
-webkit-overflow-scrolling: touch激活惯性滚动（虽已逐步弃用，但 iOS 15 之前仍建议保留） - 避免对滚动容器设
transform或will-change，它们可能触发合成层，干扰滚动事件捕获
最稳妥的写法是：height: fit-content 或固定高度 + overflow-x: auto + -webkit-overflow-scrolling: touch（仅 iOS）。
滚动条视觉消失不等于交互关闭，关键在区分“渲染控制”和“行为控制”。很多人卡在只改了 WebKit 伪元素却忘了 Firefox 的 scrollbar-width，或者误以为去掉 overflow 属性能“轻量隐藏”——结果连滑动都废了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
