根本原因是.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）又没高度约束，导致内容一多就直接撑开模态框，超出视口后浏览器只能让 出现全局滚动条——这不是你想要的局部滚动。
别指望 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;"> <h3>移动端 Safari 滚动卡顿或失效</h3> <p>即使写了 <code>max-height</code> 和 <code>overflow-y: auto</code>，iOS Safari 仍可能表现生硬——这是 WebKit 的已知限制，不是 CSS 写错了。</p> <ul> <li> <code>-webkit-overflow-scrolling: touch</code> 必须显式加在 <code>.modal-body</code> 元素上，不能写在父容器里</li> <li>第三方组件（如富文本编辑器、日期选择器）可能动态重置该样式，建议在 <code>shown.bs.modal</code> 事件后用 JS 补上：<pre class="brush:php;toolbar:false;">modalBody.style.webkitOverflowScrolling = 'touch';
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 不代劳。
