加了modal-dialog-scrollable还不滚动，是因为该类仅启用滚动逻辑，未提供可计算高度边界；必须显式为.modal-body设置max-height（如calc(100vh-200px)）和overflow-y:auto，并添加-webkit-overflow-scrolling:touch以兼容ios safari。
加了 modal-dialog-scrollable 还不滚动？不是类没生效，而是 .modal-body 没拿到可计算的高度边界——必须显式设 max-height，否则 overflow-y: auto 彻底失效。
modal-dialog-scrollable 为什么有时不滚动
这个类只是“启用滚动逻辑”的开关，不是“开箱即用”的滚动器。它默认给 .modal-body 设了 max-height: 60vh 和 overflow-y: auto，但以下情况会让它失效：
-
.modal-content或.modal-dialog被外部 CSS 设了height: 100%或flex: 1，导致子元素失去高度计算依据 -
.modal-body里用了position: absolute、display: flex子项或float，内容脱离文档流，撑不开也不收缩 - JS 动态替换了
.modal-body内容，但没重设style.maxHeight，初始渲染后高度没更新 - 你在 SCSS 中覆盖了
.modal-body的max-height，且没用!important或更高优先级选择器
最稳做法：直接在 .modal-body 上加内联样式，比如 style="max-height: calc(80vh - 140px); overflow-y: auto;"，绕过所有继承和覆盖干扰。
.modal-body 必须设 max-height 才能滚动
overflow-y: auto 只在容器有「明确、受限的高度」时才触发滚动条。.modal-body 默认是 height: auto，父级又没高度限制，浏览器根本不知道“该在哪截断”。
- 推荐用
calc(100vh - 200px)（减去 header + footer + padding 总和），比单纯70vh更稳，避开 iOS Safari 视口缩放 bug - 绝对不要用
height: 400px这类固定值，小屏会被裁切 - 避免对
.modal-content设height: 100%——这会让.modal-body失去 flex 基准，滚动直接失效
示例：
.modal-body {
max-height: calc(80vh - 120px);
overflow-y: auto;
}
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、flatpick这类组件，它们常在 focus 时动态提z-index - 临时验证：在 DevTools 中把疑似元素的
z-index改成auto，看 backdrop 是否恢复可点击
真正难缠的点不在 CSS 写法，而在于 JS 组件和原生滚动行为的隐式冲突——比如一个 position: fixed 的下拉菜单，在 modal-body 滚动时可能被错误提升层级，这种问题往往要靠隔离容器或重写 focus 管理逻辑才能根治。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
