模态框打开时页面仍可滚动，根本原因是Bootstrap依赖的modal-open类被CSS覆盖或JS未正确触发；应使用body.modal-open{overflow:hidden!important}兜底，而非直接设置body{overflow:hidden}。
模态框打开时页面还能滚动？body 的 overflow 没锁住
Bootstrap（尤其是 v5）默认在模态框显示时会尝试给 body 加 overflow: hidden，但实际常失效——尤其在使用自定义滚动容器、第三方 UI 库或 CSS 预处理器覆盖了默认样式时。结果就是：模态框弹出来，背后页面照常能滚，体验割裂，还可能触发双滚动条。
根本原因不是 Bootstrap “没写”，而是它依赖 JS 动态加 class（如 modal-open），而你的 CSS 优先级更高，或者你手动清除了这个 class；也可能你用了 data-bs-backdrop="static" 却忘了同步处理 body 样式。
- 检查浏览器开发者工具中
body是否真有overflow: hidden生效（注意被!important或更具体选择器覆盖） - 确认没在 JS 中调用
modal.hide()后又手动移除modal-open类 - 若用 SCSS 自定义主题，检查是否重写了
.modal-open的 body 样式规则
自己补上 body { overflow: hidden } 安全吗？
不安全——直接写死会破坏模态框关闭后的恢复逻辑。Bootstrap 靠 JS 在 show.bs.modal 和 hidden.bs.modal 事件里控制 body 的 overflow，硬塞 CSS 会绕过这套机制，导致关闭后页面仍不能滚动，或多次打开/关闭后状态错乱。
正确做法是信任 Bootstrap 的 JS 行为，只做“兜底修复”：
- 在全局 CSS 中增加高优先级规则：
body.modal-open { overflow: hidden !important; } - 确保该样式加载顺序在 Bootstrap CSS 之后（或用
!important强制生效） - 避免对
body写无 class 限定的overflow: hidden，否则影响非模态场景
modal-dialog-scrollable 和 overflow-y: auto 冲突怎么办？
当你给模态框内容加了 modal-dialog-scrollable，期望内部滚动，但发现整个模态框区域不响应滚动，或者滚动卡顿——大概率是父容器（如 .modal-content 或 .modal-body）缺少明确高度约束，导致 overflow-y: auto 失效。
滚动生效的前提是：元素必须有“可计算的高度边界”。Bootstrap v5 的 .modal-dialog-scrollable 默认靠 max-height: calc(100vh - 1rem) + overflow-y: auto 实现，但若你在里面嵌套了 flex 布局、未设 height 的 div，或用了 position: absolute 子元素，高度计算就会崩。
- 给
.modal-body显式加max-height: 60vh（数值按需调整），再配overflow-y: auto - 避免在
.modal-body内使用height: 100%，改用flex: 1+min-height: 0（解决 flex 子项溢出问题） - 检查是否有父级设置了
overflow: hidden（比如某个 wrapper div），它会截断子级的滚动
移动端 Safari 滚动穿透特别顽固？
iOS Safari 对 body { overflow: hidden } 的支持有历史 bug：即使样式生效，手指在屏幕边缘滑动仍可能触发底层页面滚动（俗称“滚动穿透”）。这不是 CSS 能单独解决的，必须配合 touch 事件拦截。
Bootstrap 本身不处理这个，得自己补：
- 监听
touchmove事件，在模态框打开时阻止默认行为：document.body.addEventListener('touchmove', e => { if (document.body.classList.contains('modal-open')) e.preventDefault(); }, { passive: false }); - 注意：仅在模态框显示时绑定，隐藏时解绑，否则影响其他页面交互
- 慎用
passive: true（默认值），它会让e.preventDefault()失效；必须显式设passive: false
这件事容易被忽略：开发时在 Chrome 模拟器看着没问题，一上真机就露馅。iOS 的滚动穿透不是样式问题，是浏览器底层行为，光调 CSS 没用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
