Modal弹出“向左一跳”是因Bootstrap 5+为补偿滚动条消失而给body加估算的padding-right（如17px），但position:fixed元素不响应此内边距，导致视觉偏移；data-bs-backdrop="static"可彻底绕过该逻辑。
为什么Modal弹出会“向左一跳”
这不是横向滚动被锁定了，而是 Bootstrap 5+ 主动给 body 加了内联 padding-right（比如 17px）来补偿滚动条消失的宽度——这个值是估算的，且只作用于流式内容。而 position: fixed 元素（如 .fixed-top 导航栏、全屏背景图）不响应这个 padding，视觉上就表现为“页面被吸向左”。macOS 隐藏滚动条时该值常为 0，硬补反而错位；用了 scrollbar-gutter: stable 或 overlay 滚动库后，估算逻辑更易失效。
data-bs-backdrop="static" 是最轻量解法
加这个属性直接跳过整个滚动条补偿流程：不加 modal-open 类、不设 padding-right、不改 body 的 overflow，但遮罩层和 ESC 关闭仍正常工作。
- 写法：
<div class="modal" data-bs-backdrop="static"> - 适用场景：权限确认、操作成功提示、单次反馈类 Modal——这些本就不需要点背景关闭
- 副作用：禁用点击遮罩关闭；若后续要恢复，删掉该属性即可，无残留
- 别混用
data-bs-keyboard="false"，否则 ESC 也关不了，用户卡死
必须支持点击遮罩关闭？手动接管 overflow
不能依赖 Bootstrap 自动补 padding-right，得自己控制 overflow 状态，且严格避开 modal-open 类：
- 监听
show.bs.modal事件：modalEl.addEventListener('show.bs.modal', () => document.body.style.overflow = 'hidden') - 监听
hidden.bs.modal事件：modalEl.addEventListener('hidden.bs.modal', () => document.body.style.overflow = '')（注意是空字符串，不是'auto'） - 所有
position: fixed元素（如<header class="fixed-top is-fixed"></header>）加上.is-fixed类，Bootstrap 内部会自动同步补偿 - 别在 CSS 里写
body { padding-right: 0 !important }——内联样式优先级更高，且会破坏其他组件定位
多层 Modal 关闭后背景意外可滚？检查 .show 实例数
Bootstrap 默认“任意一个 Modal 关闭就删 modal-open”，嵌套时上层还在显示，下层一关，背景就漏出滚动。不能靠 $('.modal').hasClass('show') 判断，DOM 可能不同步：
- 监听
hidden.bs.modal，用document.querySelectorAll('.modal.show').length统计当前可见 Modal 数量 - 只有数量为
0时，才执行document.body.classList.remove('modal-open') - 如果 Modal 内容区（
.modal-body）本身需滚动，记得设max-height: calc(100vh - 200px)而非height: 100%，iOS Safari 对vh缩放不稳定
真正要让横向不跳，关键不是“锁不锁滚动”，而是绕过那套估算 padding-right 的逻辑——它从设计上就和 fixed 元素不兼容，硬调值或覆盖样式只会埋坑。
