模态框内容过长时需手动设置 .modal-body 的 max-height 和 overflow-y: auto 才能实现局部滚动，否则 body 会全局滚动；推荐用 calc(100vh - 180px) 并添加 -webkit-overflow-scrolling: touch 保障 ios 流畅性。
模态框内容过长时，浏览器默认会让整个 滚动，而不是在框内局部滚动——这不是 Bug，是 Bootstrap 5 的默认行为。必须主动约束 .modal-body 的高度并启用内部滚动，否则体验直接崩坏。
为什么 modal-body 不滚动、body 却滚了
根本原因是 .modal-body 没设 max-height，而它的父级 .modal-content 在 Bootstrap 5 中默认是 display: block，高度完全由内容撑开。一旦总高度超过视口， 就被迫滚动。
-
overflow-y: auto必须配合max-height才生效；只加overflow-y: auto等于没加 - 别给
.modal-dialog或.modal-content设height或max-height，会破坏垂直居中和响应式断点 - 推荐用
calc(100vh - 180px)（减去 header + footer + padding 总和），比纯70vh更稳，避开 iOS Safari 视口缩放 bug - 绝对不要用
height: 400px这类固定值，小屏会被裁切
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;"，别依赖默认值
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等第三方滚动库，它会接管原生滚动，这行就无效了——得关掉接管或换方案 - 确保
.modal-content是display: flex; flex-direction: column，否则.modal-body的max-height不起作用
滚动后点不到 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 - 如果用了
modal-fullscreen，记得检查父容器是否设了overflow: hidden，否则全屏可能被截断
真正麻烦的不是加滚动条，而是滚动之后的交互链路是否完整：焦点是否可到达、键盘是否能操作、backdrop 是否还能关闭、软键盘弹出后位置是否偏移——这些细节一漏，移动端基本不可用。
