Bootstrap v5.x 通过给 body 添加 overflow-hidden 类（而非内联样式）实现模态框打开时隐藏滚动条，该类仅在 modal 处于 show 状态时存在；常见失效原因包括高优先级 CSS 冲突、自定义滚动容器、padding-right 补偿错误或类残留。
模态框打开时 body 滚动条消失的原理是什么
Bootstrap（v5.x）默认在 show 类添加到 .modal 同时，会给 body 加上 overflow-hidden 类，这个类内部就是 overflow: hidden !important。它不是靠 JS 直接设 style.overflow，而是靠 class 切换控制——这样更利于 CSS 过渡、媒体查询和主题适配。
关键点在于：这个 class 是加在 body 上的，不是 modal 自身；且仅当有 modal 处于 show 状态且未被销毁时才存在。
为什么有时滚动条没消失，或消失后页面“上跳”
常见原因不是 Bootstrap 本身失效，而是与现有样式冲突或 DOM 结构异常：
-
body或html上有更高优先级的overflow: visible/auto/scroll声明（尤其带!important） - 页面用了自定义滚动容器（如
div#app+overflow-y: auto），而body本就不负责滚动，此时加overflow-hidden对实际滚动无影响 - modal 打开前
body已经有padding-right补偿（为防滚动条消失导致布局偏移），但补偿值错误，造成视觉“上跳”或内容挤压 - 多个 modal 嵌套或未正确调用
hide()，导致overflow-hidden类残留
如何安全地干预 overflow-hidden 的行为
不建议直接删掉 Bootstrap 的 overflow-hidden 类逻辑，容易破坏 backdrop、focus trap 等依赖项。推荐以下可控方式：
- 若需保留 body 滚动（比如长表单 modal 需上下滑动），给
.modal-dialog加max-height: 80vh和overflow-y: auto，让 modal 内部滚动，而非禁用 body - 若要禁用
overflow-hidden但保留其他 modal 功能，可监听show.bs.modal事件并手动移除：document.addEventListener('show.bs.modal', e => { document.body.classList.remove('overflow-hidden'); }); - 若需自定义滚动禁用逻辑（例如只在桌面端禁用），覆盖 CSS 中
.modal-open .overflow-hidden的生效条件，加媒体查询限定
检查和调试 overflow-hidden 是否生效的快捷方法
打开浏览器开发者工具，快速验证三件事：
- 选中
body元素，看右侧 Styles 面板中是否出现overflow: hidden，且来源是.overflow-hidden类（不是内联 style） - 在 Console 中运行
document.body.classList.contains('overflow-hidden')，弹出 modal 前后对比返回值 - 临时在控制台执行
document.body.style.overflow = 'auto'，看滚动是否恢复——若无效，说明有更强制的 CSS 规则在起作用
真正容易被忽略的是：某些 UI 框架（如 Vue Router 的 scrollBehavior 或 Next.js 的 useScroll）会在 modal 显示期间主动重置 body scroll position，这和 overflow-hidden 无关，但现象相似。遇到“滚动条消失但页面跳回顶部”，先查这类 side effect。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
