modal内容区不滚动的根本原因是父容器无高度约束导致max-height失效，正确做法是给.modal-body设calc(100vh-200px)和overflow-y:auto，并加-webkit-overflow-scrolling:touch兼容ios，禁用对.modal-dialog或.modal-content设高度。
Modal内容区不滚动，不是因为没加 overflow-y: auto，而是它根本没生效——父容器没高度，子元素再设也白搭。
为什么 .modal-body 加了 overflow-y: auto 还是不滚动
常见错误现象：明明写了 style="max-height: 60vh; overflow-y: auto;"，但内容一长就直接撑出模态框底部，滚动条死活不出现。
- 根本原因：Bootstrap 的
.modal-dialog默认是display: flex，而.modal-content没设高度约束，导致.modal-body的max-height失去参照系，计算结果为auto - 移动端 Safari 更糟：
vh在地址栏收放时会跳变，max-height: 60vh可能瞬间变成 0 - 别用
height: 100%——.modal-content没固定高，百分比高度直接失效
正确设置 .modal-body 的 max-height 和 overflow-y
必须让 .modal-body 的高度有明确边界，且滚动行为只作用于它自己。
- 推荐写法：
style="max-height: calc(100vh - 200px); overflow-y: auto;"（减去 header + footer 高度，数值按实际调整） - 移动端加兜底：
-webkit-overflow-scrolling: touch，否则 iOS Safari 滚不动或卡顿 - 别给
.modal-dialog或.modal-content设height/max-height，会破坏居中和响应式逻辑 - 如果用了自定义 header/footer，确保它们不在
.modal-body内，否则会被一起滚动
多层 Modal 下滚动突然失效
第二层 Modal 打开时，第一层还没关，但背景恢复滚动、内部滚动条也消失了——这是 Bootstrap 默认逻辑“关一个 Modal 就清 modal-open”导致的。
- 检查是否还有其他 Modal 显示：
document.querySelectorAll('.modal.show').length > 0，别依赖body.classList.contains('modal-open') - 监听
hidden.bs.modal，若仍有 Modal 显示，手动补回document.body.classList.add('modal-open') - 同时重置
document.body.style.overflow = 'hidden'，避免被上层关闭操作意外放开
滚动条样式自定义只对 .modal-body 有效
想改滚动条颜色或宽度？伪元素必须精准作用在真正发生滚动的容器上。
- 只对 WebKit 浏览器生效（Chrome/Safari/Edge），Firefox 需用
overlay-scrollbars等 JS 方案 - 必须写在
.modal-body上，且确保它当前确实触发了overflow-y: auto（DevTools 里看 computed 样式） - 最小可用规则集：
.modal-body::-webkit-scrollbar { width: 8px; } .modal-body::-webkit-scrollbar-track { background: #f1f1f1; } .modal-body::-webkit-scrollbar-thumb { background: #c1c1c1; } - 别给
.modal-body设overflow: hidden或overflow-y: scroll，前者禁滚动，后者强制显示空滚动条，干扰自定义
最常被忽略的一点：滚动是否生效，永远取决于「父容器是否有可计算的高度」，而不是你写了多少个 overflow-y。每次调不完，先打开 DevTools 检查 .modal-body 的 computed height 和 overflow，再往上逐级看父元素的 display、height、flex 属性——90% 的问题卡在这三级里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
