Bootstrap Modal模态框内容区原生手势左右滑动

在Bootstrap的Modal里做水平滚动，很多人第一反应是加个overflow-x: auto，结果发现死活滑不动——这不是你手残，而是Modal的DOM结构在背后使绊子。问题出在.modal-dialog的display: flex上，它直接截断了子元素的滚动上下文，就算你把.modal-body或.modal-content的overflow-x设得再对，浏览器也不认，因为父级flex容器没给子元素“溢出空间”的渲染权限。

Modal里直接加overflow-x: auto为什么滑不动

因为Bootstrap的.modal-dialog默认是display: flex，它会截断子元素的水平滚动上下文。即使你给.modal-body或.modal-content加了overflow-x: auto，浏览器也不会触发水平滚动——父级flex容器没给子元素“溢出空间”的渲染权限。

真正要滚动的容器必须脱离.modal-dialog的flex流

原生手势左右滑动依赖的是底层滚动机制，不是JS拖拽模拟。必须让可滑动内容处于一个独立、宽度超限、且未被flex布局压制的容器中：

• 把要滑动的内容（比如.nav、.list-group或自定义tab区）用新
  包一层，例如
• 给这个wrapper加：overflow-x: auto、white-space: nowrap、-webkit-overflow-scrolling: touch
• 确保内部子项不换行：设display: inline-block或flex-shrink: 0，别用flex: 1把它们压扁
• 别在.modal-body上直接设overflow-x，它默认是块级流，无法承载内联子项的水平溢出

iOS Safari和部分Android WebView需要额外防干扰

原生overflow-x在移动端容易失效，不是CSS写错了，而是渲染引擎限制：

• -webkit-overflow-scrolling: touch必须加在真正滚动的wrapper上，不是.modal或.modal-body
• 检查是否意外设置了touch-action: pan-y（常见于轮播、地图组件），它会禁用水平拖拽；临时加touch-action: pan-x测试
• 如果.modal-dialog用了transform: translate()居中（如modal-dialog-centered），旧版WebKit可能直接禁用水平滚动，换成top: 50%; left: 50%; transform: translate(-50%, -50%)更稳妥
• 避免在wrapper内部用display: flex; flex-direction: column却没给子容器设flex: 1，否则高度塌陷会导致水平滚动区域不可见

当原生滚动反复失败时，用iScroll接管更可控

原生overflow-x在复杂Modal场景下容错率低，尤其涉及动态渲染、横竖屏切换或需要惯性回弹时：

• 目标容器必须是wrapper（比如.horizontal-scroll-wrapper），不能是.nav本身
• 初始化要等DOM渲染完成：若Modal是Vue/React动态插入，必须在shown.bs.modal事件里调用new IScroll('.horizontal-scroll-wrapper', { scrollX: true, scrollY: false })
• 务必显式关闭垂直滚动：scrollY: false，否则默认只响应vertical手势
• 如果页面有全局preventDefault或第三方手势库（如Hammer.js），需在iScroll配置中加preventDefault: false

真正麻烦的不是选原生还是iScroll，而是Modal内部嵌套了其他组件（比如地图、图表、富文本编辑器）时，它们可能悄悄调用了e.preventDefault()或重写了touchstart，把原生滚动事件吞掉了——这类干扰往往藏得深，得逐层排查wrapper的touch-action和事件监听链。