只改 .modal-body 才有效，因其是唯一语义化内容容器，且父级 flex 布局截断滚动上下文；bootstrap 5 官方推荐在此设 max-height 和 overflow-y: auto，配合 -webkit-overflow-scrolling: touch 修复 ios 滚动卡顿。
直接给 .modal-body 加 max-height 和 overflow-y: auto，其他地方动了反而坏事儿。
为什么只改 .modal-body 才有效
Bootstrap 的 .modal-dialog 默认是 display: flex，.modal-content 没设高度限制，整个模态框会随内容撑开——滚动行为被父级弹性布局“截断”，子元素根本拿不到滚动上下文。你给 .modal 或 .modal-content 加 overflow，浏览器压根不认，因为它们没形成“有边界的高度容器”。
只有 .modal-body 是语义上唯一该承载长内容的区域，且 Bootstrap 5 官方文档明确推荐在此处控制滚动：
-
.modal-body必须显式设max-height（别用height，小屏会被裁） -
max-height建议用响应式单位，比如70vh或calc(100vh - 216px)（留出 header/footer 空间） - 必须配
overflow-y: auto，scroll会强制显示滚动条，干扰体验 - 如果用了自定义 header/footer，确保它们不在
.modal-body内，否则也会被卷进去
scrollable 属性在 Bootstrap 5.2+ 怎么用
Bootstrap 5.2 起支持 data-bs-scrollable 属性（或 class modal-dialog-scrollable），但它只作用于 .modal-body，且默认 max-height: 60vh —— 这个值在很多场景下偏小，尤其带表单或富文本时容易不够用。
实际使用中建议：
- 保留
data-bs-scrollable，但额外加内联样式覆盖：style="max-height: 75vh;" - 不要依赖它自动适配；用 DevTools 检查渲染后
.modal-body的 computedmax-height和overflow-y是否真为auto - 如果 modal 是动态插入 DOM 的（比如 Vue/React 组件 mount 后才加），确保样式在 modal 渲染完成后再生效，否则初始高度计算可能不准
移动端 Safari 滚不动？加这行就对了
iOS Safari 对 flex 容器内的滚动支持弱，即使 .modal-body 高度超限、overflow-y: auto 也设了，滚动仍卡顿或无惯性。这不是 bug，是 WebKit 的渲染限制。
必须补一句：
.modal-body {
-webkit-overflow-scrolling: touch;
}
注意点：
- 这行只对 WebKit 内核生效（Chrome/Safari/Edge），Firefox 不需要也不识别
- 必须加在真正发生滚动的元素上，也就是
.modal-body，不是.modal或外层 wrapper - 如果用了第三方滚动库（如
overlay-scrollbars），它会接管原生滚动，这行就无效了——得换库或关掉它的接管逻辑
滚动后 backdrop 点不了？大概率是 z-index 溢出了
不是滚动本身的问题，而是某些内部组件（比如富文本编辑器、日期选择器、下拉菜单）在聚焦或初始化时，偷偷把自身 z-index 设到了 1060+，盖住了 .modal-backdrop（默认 z-index=1040）。
排查方法：
- 打开 DevTools，选中出问题的内部元素，看 computed 样式里
z-index是多少 - 检查是否用了
autofocus或 JS 主动调用.focus()，这类操作常触发第三方组件提升层级 - 确保所有 modal 内部元素的
z-index≤ 1050，.modal是 1055，.modal-backdrop是 1040，中间留出安全间隙 - 别在 CSS 里写
* { z-index: 9999 }这类全局规则，它会在 modal 里照常生效
最易被忽略的是：滚动条样式自定义必须作用在 .modal-body 上，且它得真实溢出——很多人写了 ::-webkit-scrollbar 却没效果，是因为 DevTools 里看到的 .modal-body 的 overflow-y 其实是 visible，根本没触发滚动上下文。
