最稳的兜底写法是body.modal-open { overflow: hidden !important }，它增强Bootstrap原生JS机制而非覆盖，避免破坏关闭恢复逻辑，且需确保CSS加载顺序在Bootstrap之后；禁用position: fixed以防页面跳动。
body.modal-open { overflow: hidden !important } 是最稳的兜底写法
Bootstrap 本身会通过 JS 在模态框显示时给 body 添加 modal-open 类，并尝试设置 overflow: hidden；但这个行为极易被自定义 CSS 覆盖（比如你写了 body { overflow: auto } 或用了更高优先级的选择器）。直接写 body { overflow: hidden } 看似简单，实际会破坏关闭后的恢复逻辑——因为 Bootstrap 依赖 class 的增删来触发滚动状态切换，硬塞样式会让 JS 失去控制权。
正确做法是只增强已有机制：
- 确保你的 CSS 文件加载在 Bootstrap CSS 之后
- 写一条高优先级规则：
body.modal-open { overflow: hidden !important; } - 别加
position: fixed到body—— 它会引发回流、页面跳动，且和 Bootstrap 的滚动补偿逻辑冲突
modal-dialog-scrollable 内部不滚动？检查 .modal-body 是否有高度约束
禁掉背景滚动后，很多人发现模态框自己也不滚了。这不是 overflow 没生效，而是 .modal-dialog-scrollable 依赖父容器（通常是 .modal-body）有明确的高度上限，否则 overflow-y: auto 不会触发。
常见失效场景：
-
.modal-body没设max-height，或设的是height: 100%（父容器没高度，子元素百分比无效） - 移动端用
60vh在 iOS Safari 上失效（视口缩放 bug），建议改用max-height: calc(100vh - 200px)，减去 header/footer 实际像素高度 - 内容是异步加载的，
max-height设得太小，导致滚动条出现前内容就被截断
页面“向左一跳”？别动 padding-right，改用 data-bs-backdrop="static"
模态框打开瞬间页面横向偏移，根本不是滚动问题，而是 Bootstrap 5 主动给 body 加了 padding-right: 17px 补偿滚动条消失。fixed 元素（如导航栏、全屏背景）没同步右移，就显得“被吸向左”。
强行覆盖 padding-right 会破坏其他组件（比如下拉菜单、Tooltip）的位置计算。更干净的解法：
- 如果允许点击遮罩关闭，监听
show.bs.modal事件，手动设document.body.style.overflow = 'hidden'，但**不添加modal-open类**，也**不设padding-right** - 如果可以接受禁用遮罩点击关闭，直接在 modal 标签加
data-bs-backdrop="static"—— 这个属性会跳过整个滚动条补偿逻辑，同时保留 ESC 键关闭能力 - 若必须保留 fixed 元素对齐，所有
position: fixed元素都加上.is-fixed类，Bootstrap 内部会自动同步padding-right
多层 Modal 关闭后背景能滚？用 .modal.show 判断真实状态
Bootstrap 默认逻辑是：任意一个 modal 关闭 → 移除 modal-open → body 恢复滚动。这在嵌套弹窗时会导致上层 modal 还开着，但背景已可滚动。
不能靠 $('body').hasClass('modal-open') 判断，因为 class 可能被其他插件污染或手动清除。真实、可靠的状态来源只有一个：
- 监听非顶层 modal 的
hidden.bs.modal事件 - 检查当前是否还有 visible modal：
$('.modal.show').length > 0 - 如果是，手动重加
modal-open到body；否则才移除
这个判断点容易被忽略——尤其当 modal 是动态创建、或通过第三方封装调用时，JS 层的状态管理很容易脱节。
