直接给.modal-body加overflow-x: auto无效，因.modal-dialog的display: flex会截断水平滚动上下文；须新增wrapper容器并设overflow-x: auto、white-space: nowrap等样式，子项需inline-block或flex-shrink: 0。
为什么直接给 .modal-body 加 overflow-x: auto 没用
因为 Bootstrap 的 .modal-dialog 默认是 display: flex，它会创建一个独立的格式化上下文，把子元素（比如 .modal-body）的水平溢出截断。即使你设了 overflow-x: auto，滚动容器也得不到正确的滚动上下文——它被父级 flex 容器“锁死”了。
真正要滚动的，必须是一个脱离该 flex 流的新容器，且宽度要超出其父级可视区域。
- 别在
.modal-body上直接加overflow-x，它默认是块级流，不支持内联子项的水平溢出 - 必须把可滑动内容（如
.nav、.list-group或自定义 tab 区）包进一个新 wrapper，例如<div class="scrollable-content"></div> - 这个 wrapper 要设
overflow-x: auto、white-space: nowrap、-webkit-overflow-scrolling: touch - 内部子项（如
.nav-link）得设display: inline-block或flex-shrink: 0，否则换行或压缩会导致滑动失效
移动端滑不动？检查 -webkit-overflow-scrolling 和 touch-action
iOS Safari 和部分 Android WebView 对原生 overflow-x 支持弱，尤其在 modal 这类含 transform 的环境中容易静默失效。这不是 CSS 写错了，而是渲染引擎限制。
-
-webkit-overflow-scrolling: touch必须加在**实际发生滚动的 wrapper 元素上**，不是.modal或.modal-body - 如果用了
.modal-dialog-centered，它依赖transform: translate()，某些旧版 WebKit 会禁用原生水平滚动；可临时换成top: 50%; left: 50%; transform: translate(-50%, -50%)居中 - 检查是否意外继承了
touch-action: pan-y（常见于轮播、地图组件），它会阻止水平拖拽；临时加touch-action: pan-x试试 - 小屏下若仍卡顿，给 wrapper 加
will-change: scroll-position可能提升响应性
用 iScroll 替代原生滚动时的关键初始化时机
当原生方案反复失效，尤其是需要惯性滚动、回弹、或监听拖拽事件时，iScroll 是更可控的选择——但它对 DOM 状态和尺寸极其敏感。
- 目标容器不能是
.nav本身，而应是它的**父级 wrapper**（比如<div class="tabs-parent"><ul class="nav"></ul></div>） - 初始化必须等 Modal 完全 show 后再执行：监听
shown.bs.modal事件，而不是$(document).ready() - 配置必须显式指定：
scrollX: true、scrollY: false、preventDefault: false（否则 touch 会触发页面默认行为） - 动态渲染的 Modal（React/Vue）里，每次打开都要重新 new iScroll 实例；别复用旧实例，否则宽度计算不准导致滑动错位
滑动后 active 状态不同步？别只靠 CSS
横向滚动本身不改变 Bootstrap 的 tab 或 carousel 的 active 类状态。用户滑动到第 3 个 tab，但点击仍跳转到第 1 个——这是常见错位。
- 原生
overflow-x方案下，需手动监听scroll事件 +getBoundingClientRect()判断哪个 tab 在视口中心，再调用$().tab('show') - 用 iScroll 时，监听
scrollEnd事件，结合scroller.x值和每个 tab 的offsetLeft计算当前可视项索引 - 避免用
scrollIntoView()自动对齐，它会打断用户手势；仅用于初始定位或键盘导航 fallback - 小屏设备建议直接退化为垂直堆叠布局（用
flex-column工具类），而非强行维持滑动——体验比“能滑但点不准”更重要
原生滚动在 Modal 里始终是个权衡：轻量但兼容性差，稳定但引入额外依赖。最易被忽略的是 wrapper 容器的层级位置 和 初始化时机 —— 错一个，整个滑动链就断了。
