只有给 .modal-body 设置 max-height 和 overflow-y: auto 才能实现有效滚动，因 .modal-dialog 的 flex 布局截断滚动行为；需配合 -webkit-overflow-scrolling: touch 修复 iOS Safari 卡顿，并针对 .modal-body 自定义滚动条样式。
只改 .modal-body 才有效
bootstrap 的 .modal-dialog 默认是 display: flex，.modal-content 没设高度限制，整个模态框会随内容撑开——滚动行为被父级弹性布局“截断”，你给 .modal 或 .modal-content 加 overflow-y: auto，浏览器根本不会触发滚动。只有 .modal-body 是语义上唯一该承载长内容的区域，且 bootstrap 5 官方文档明确推荐在此处控制滚动。
必须显式设置：
-
.modal-body上加max-height（别用height，小屏会被裁） - 同时配
overflow-y: auto（scroll会强制显示滚动条，干扰体验） - 确保
.modal-header和.modal-footer不在.modal-body内，否则也会被卷进去
modal-dialog-scrollable 类为什么没滚动？
这个类只“启用滚动逻辑”，不提供可滚动的高度边界。Bootstrap 5.2+ 中它默认给 .modal-body 设 max-height: 60vh 和 overflow-y: auto，但这个值在表单或富文本场景下常不够用，且极易被破坏：
- 父级
.modal-content或.modal-dialog被设了height: 100%或flex: 1，导致子元素无法继承有效高度 -
.modal-body里用了display: flex; flex-direction: column却没给子容器设flex: 1，高度塌陷 - 移动端 Safari 缺
-webkit-overflow-scrolling: touch，滚动卡顿或失效
建议显式覆盖：<div class="modal-body" style="max-height: 75vh; overflow-y: auto;">
<h3>移动端 Safari 滚不动？加这行就对了</h3>
<p>iOS Safari 对 flex 容器内的滚动支持弱，即使 <code>.modal-body 高度超限、overflow-y: auto 也设了，滚动仍卡顿或无惯性。这不是 bug，是 WebKit 渲染限制。
必须补一句：
.modal-body {
-webkit-overflow-scrolling: touch;
}
注意点：
- 这行只对 WebKit 内核生效（Chrome/Safari/Edge），Firefox 不需要也不识别
- 必须加在真正发生滚动的元素上，也就是
.modal-body，不是.modal或外层 wrapper - 如果用了 overlay-scrollbars 等第三方滚动库，它会接管原生滚动，这行就无效了
自定义滚动条样式只对 .modal-body 生效
很多人写了 ::-webkit-scrollbar 却没效果，是因为选错了目标：不是 .modal 或 .modal-content，而是 .modal-body 本身，且它得真正发生溢出。
最小必要规则集（直接加到 CSS 文件里）：
.modal-body::-webkit-scrollbar { width: 8px; }
.modal-body::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 4px; }
.modal-body::-webkit-scrollbar-thumb { background: #c1c1c1; border-radius: 4px; }
.modal-body::-webkit-scrollbar-thumb:hover { background: #a0a0a0; }
Firefox 不识别这些伪元素，目前唯一合法方式是用 JS 模拟滚动容器（如 simplebar），但这会增加复杂度和潜在冲突。
滚动后 backdrop 点不了？那大概率不是滚动本身的问题，而是 .modal-body 里某个子组件（比如富文本编辑器、下拉菜单）动态提升了 z-index，盖住了 .modal-backdrop。这种层级错乱比滚动设置本身更难排查，且容易被忽略。
