加了modal-dialog-scrollable不滚动，主因是.modal-body缺max-height；需显式设max-height（如calc(100vh - 200px)）并加-webkit-overflow-scrolling: touch修复ios卡顿。
modal-dialog-scrollable加了但不滚动？检查.modal-body是否真被约束高度
加modal-dialog-scrollable只是启用滚动逻辑，不是“开箱即用”。它默认给.modal-body设max-height: 60vh和overflow-y: auto，但这个高度极易被破坏：
- 父级
.modal-content或.modal-dialog被设了height: 100%或flex: 1，导致.modal-body拿不到有效高度计算依据 -
.modal-body里用了position: absolute或display: flex子元素，脱离文档流，撑不开也不收缩 - 你在JS中动态替换过
.modal-body内容，但没重设style.maxHeight，初始渲染后高度没更新
最稳做法：直接在.modal-body上加内联样式，比如style="max-height: 75vh; overflow-y: auto;"，别依赖默认值。
.modal-body加了overflow-y: auto还是没滚动条？缺max-height是主因
overflow-y: auto只在容器有「可计算的、受限的高度」时才生效。Bootstrap 默认.modal-body是height: auto，父级又无高度限制，整个链路没边界，浏览器根本不知道“该在哪截断”。
- 必须显式设
max-height，推荐用calc(100vh - 200px)（减去 header + footer + padding 总和），比单纯70vh更稳，避开 iOS Safari 视口缩放 bug - 绝对不要用
height: 400px这类固定值，小屏会被裁切 - 避免对
.modal-content设height: 100%——这会让.modal-body失去 flex 基准，滚动直接失效
iOS Safari 滚不动或卡顿？-webkit-overflow-scrolling: touch不能少
iOS Safari 对 flex 容器内的滚动支持弱，即使.modal-body高度超限、overflow-y: auto也设了，滚动仍可能无惯性、卡顿甚至失效。
- 必须加这条：
.modal-body { -webkit-overflow-scrolling: touch; } - 它只对 WebKit 内核生效（Chrome/Safari/Edge），Firefox 不需要也不识别
- 如果用了
overlay-scrollbars等第三方滚动库，它会接管原生滚动，这行就无效了——得关掉接管或换方案
滚动后点不到 backdrop 关闭模态框？z-index 被内部元素盖住了
这不是滚动本身的问题，而是.modal-body里某个元素（比如富文本编辑器、下拉菜单、autofocus 输入框）获得焦点后，JS 临时提升了它的z-index，盖住了.modal-backdrop（默认z-index: 1040）。
- 检查是否对
.modal-body或其子元素写了position: relative+z-index，删掉 - 重点排查
vue-select、quill、flatpickr这类组件，它们常偷偷改z-index - 兜底写法：
$('#myModal').on('shown.bs.modal', () => { $('.modal-body *').css('z-index', 'auto'); });
真正容易被忽略的是：滚动行为本身不产生 z-index 变化，但所有触发滚动的交互（点击、聚焦、JS 初始化）都可能顺带改层级。别只盯着滚动 CSS，得查 DOM 渲染后的实时 computed 样式。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
