根本原因是Bootstrap 5自动为body添加modal-open类并动态设置padding-right补偿滚动条宽度，但fixed元素未同步右移；禁用补偿最干净方式是使用data-bs-backdrop="static"或手动控制overflow而不操作padding-right。
为什么 Modal 弹出后页面会“向左一跳”
根本不是 JS 或动画问题，是 Bootstrap 5 在 show.bs.modal 触发时，自动给 body 添加 modal-open 类，并同步设置 padding-right 补偿滚动条宽度——而这个补偿只作用于 body 流式内容，position: fixed 的导航栏、页脚、背景图等元素没跟着右移，视觉上就像整个页面被“吸”向左了一点。
这个 padding-right 值不是写死的 17px，而是动态计算的（通常 12–17px），取决于当前浏览器滚动条真实宽度。macOS 隐藏式滚动条可能返回 0，自定义滚动条插件（如 overlay-scrollbars）会让检测失效，导致补偿缺失或错误。
如何禁用 padding-right 补偿但保留背景锁定
最干净的做法是绕过 Bootstrap 的补偿逻辑，而不是覆盖它。两种可靠路径：
- 给 modal 标签加
data-bs-backdrop="static"：它会跳过padding-right注入，也不响应点击遮罩关闭，但 ESC 键仍可用； - 手动接管滚动控制：监听
show.bs.modal，只设document.body.style.overflow = 'hidden'，**不添加modal-open类，也不动padding-right**；监听hidden.bs.modal时还原overflow，并确保没有残留样式。
别用 body { padding-right: 0 !important } 这类全局覆盖——它会干扰下拉菜单、Tooltip 等依赖 body 宽度的组件定位。
fixed 元素右移错位怎么办
如果你必须保留默认的 modal-open 行为（比如要支持点击遮罩关闭），又不想让 position: fixed 元素错位，Bootstrap 5 已内置解法：
- 给所有
position: fixed元素显式加上.is-fixed类，例如：； - Bootstrap 内部会监听
modal-open状态，自动为带.is-fixed的元素同步增删padding-right，保持视觉对齐； - 不加这个类，就只能自己监听事件手动同步，容易漏掉或重复执行。
移动端和第三方滚动库的兼容要点
在 iOS Safari 或用了 perfect-scrollbar 这类插件的项目里，原生滚动条宽度检测常失效（返回 0），导致补偿缺失、页面右跳。此时不能硬编码 padding-right: 15px：
- 优先改用
data-bs-backdrop="static"，彻底避开补偿逻辑； - 若必须动态测宽，用更鲁棒的函数：
document.documentElement.clientWidth - document.body.clientWidth比offsetWidth - innerWidth更准（尤其在 zoom 或缩放视口下）； - 注意：iOS Safari 对
vh单位有视口缩放 bug，Modal 内容滚动时别只靠max-height: 60vh，建议用max-height: calc(100vh - 200px)并减去 header/footer 实际像素高度。
真正难处理的是多层 Modal + 第三方滚动库组合场景——这时 $('.modal.show').length 判断和手动 overflow 控制都得逐层校验，稍有遗漏就会出现关掉一层后背景意外可滚。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
