Modal里导航条手机划不动，是因为.modal-dialog的flex布局截断滚动上下文；需用独立容器（如.scrollable-nav）设overflow-x:auto、white-space:nowrap及-webkit-overflow-scrolling:touch，并确保子项不换行、不压缩。
Modal里加的导航条为什么在手机上划不动
直接给 .modal-body 加 overflow-x: auto 没用——因为 .modal-dialog 是 display: flex，会截断子元素的滚动上下文，导致水平溢出被忽略。真正要滚动的容器必须脱离这个 flex 流，且宽度要超出父级。
- 把可滑动内容（比如
.nav或.list-group）包进一个新容器，例如<div class="scrollable-nav"></div> - 给这个新容器设
overflow-x: auto、white-space: nowrap、-webkit-overflow-scrolling: touch - 确保内部子项（如
.nav-link）设display: inline-block或flex-shrink: 0，防止换行 - 别在
.modal-body上直接设overflow-x——它默认是块级流，不支持内联子项的水平溢出
iScroll 初始化失败的常见原因
当原生 overflow-x 反复失效（尤其 iOS Safari 卡顿、无惯性、拖不动），iScroll 是更可控的选择，但它对初始化时机和目标容器非常敏感。
- 目标容器不能是
.nav本身，而必须是它的**父级 wrapper**（比如<div class="tabs-parent"><ul class="nav"></ul></div>） - 初始化代码必须等 DOM 渲染完成，不能只靠
$(document).ready()；若 Modal 是动态插入（React/Vue 渲染后 show），得在shown.bs.modal事件里再调用 - 务必设
scrollX: true且scrollY: false，否则默认只响应垂直手势 -
-webkit-overflow-scrolling: touch要加在 iScroll 实例绑定的容器上，不是.modal或.modal-body
移动端 touch 事件没响应或误触发
Bootstrap 5 默认不处理 touchstart 等原生触摸事件，只响应 click 和 pointerdown。想让滑动导航支持手指拖拽，得自己补监听逻辑，否则第一次划可能没反应，或划着划着触发了页面滚动。
- 在滑动容器上监听
touchstart+touchmove，并在touchmove中调e.preventDefault()阻止页面滚动 - 水平位移阈值建议设为 5px，避免误触；方向判断用
Math.abs(e.touches[0].clientX - startX) > 5 - 别在
touchstart里立刻调bootstrap.Modal.getInstance().show()，优先等touchend确认意图 - 检查是否意外触发了
touch-action: pan-y（常见于地图、轮播组件），临时加touch-action: pan-x试试
为什么加了 overflow-x: auto 还是不能拖
这不是 CSS 写错了，而是渲染引擎限制：iOS Safari 和部分 Android WebView 对 overflow-x 支持弱，尤其在 flex 或 transform 环境下容易失效。
-
-webkit-overflow-scrolling: touch必须加在**实际发生滚动的元素上**，也就是那个scrollable-nav容器 - 如果用了
modal-dialog-centered类（内部含transform），某些旧版 WebKit 会禁用原生水平滚动，得换成top: 50%; left: 50%; transform: translate(-50%, -50%)这类更底层的居中方式 - 滚动容器的父级不能有
overflow: hidden以外的值，否则touchstart可能无法捕获 - 滚动区域里嵌了可拖拽元素（如 canvas、图表、自定义 slider），它们可能吞掉了
preventDefault()，导致外层滚动失效
实际滚动行为受容器层级、CSS 渲染模式、触摸事件拦截策略三者共同影响，任何一个环节漏掉都会导致“看起来写了但就是不动”。最稳的路径是：先用纯 CSS 实现基础滚动，再按需补 touch 事件或 iScroll，而不是一开始就堆插件。
