根本原因是.modal-body未设max-height，父容器无高度约束导致内容撑开模态框、触发body全局滚动；必须同时设置max-height（如70vh）、overflow-y:auto和-webkit-overflow-scrolling:touch才有效。
为什么 modal-body 不滚动，反而整个页面在滚
根本原因是 .modal-body 没设 max-height，而它的父级（.modal-content 和 .modal-dialog）又没高度约束，导致内容一多就直接撑开模态框，超出视口后浏览器只能让 <body> 出现全局滚动条——这不是你想要的局部滚动。
别指望 Bootstrap 默认给你加滚动：从 v4 到 v5.3，.modal-body 始终不预设高度，必须手动干预。加 overflow-y: auto 却没 max-height？那等于没写，浏览器压根不会触发滚动。
-
.modal或.modal-content上加overflow-y: auto无效，还会破坏垂直居中和响应式缩放 -
.modal-dialog是display: flex，它会截断子元素的滚动上下文，别碰它的高度 -
modal-dialog-scrollable类只是“启用滚动逻辑”，默认只给.modal-body设max-height: 60vh，小屏或富文本场景下常不够用
怎么让 .modal-body 真正滚动起来
必须三者同时存在，缺一不可：
-
max-height：用70vh或calc(100vh - 180px)（减去 header + footer + padding 的估算值），别用height，否则小屏内容被硬裁切 -
overflow-y: auto：用auto而非scroll，避免滚动条常驻干扰视觉 -
-webkit-overflow-scrolling: touch：iOS Safari 必加，否则滚动卡顿、无惯性、松手即停；这个属性只对已启用overflow的元素生效，且必须写在.modal-body上
最简写法：
<div class="modal-body" style="max-height: 70vh; overflow-y: auto; -webkit-overflow-scrolling: touch;">
移动端 Safari 滚动卡顿或失效
即使写了 max-height 和 overflow-y: auto，iOS Safari 仍可能表现生硬——这是 WebKit 的已知限制，不是 CSS 写错了。
-
-webkit-overflow-scrolling: touch必须显式加在.modal-body元素上，不能写在父容器里 - 第三方组件（如富文本编辑器、日期选择器）可能动态重置该样式，建议在
shown.bs.modal事件后用 JS 补上：modalBody.style.webkitOverflowScrolling = 'touch';
- 较新 Safari 已标记该属性为 deprecated，但目前仍是唯一可靠解法；若未来失效，需切换至
overscroll-behavior: contain配合 JS 模拟惯性
滚动后 backdrop 点不了怎么办
这不是滚动本身的问题，而是 z-index 层级错乱的副作用：某些内部元素（比如 autofocus 的 input、富文本编辑器初始化后的 toolbar）可能临时提升自身 z-index，盖住 .modal-backdrop，导致点背景无法关闭模态框。
- 检查 DevTools 中
.modal-backdrop的计算z-index（默认是1040），确保所有.modal-body内部元素的z-index不超过1050 - 避免给
.modal-body或其子容器设position: relative+z-index，除非你清楚整条层级链路 - 如果用了 overlay-scrollbars 等第三方滚动库，它会接管原生滚动，此时
-webkit-overflow-scrolling失效，得关掉接管或换方案
实际滚动是否生效，关键不在有没有写 overflow，而在 .modal-body 是否真正获得了可滚动的高度边界——这个边界必须由你亲手设定，Bootstrap 不代劳。
