抖动是 bootstrap 5+ 主动添加的 padding-right 补偿逻辑导致的视觉错位——它仅作用于 body，未同步处理 position: fixed 元素及第三方滚动库干扰。
抖动不是 Bug，是 Bootstrap 5+ 主动加的 padding-right 补偿逻辑在起作用——它想填平滚动条消失造成的宽度缺口，但只动了 body，没管 position: fixed 元素，也没考虑你用的第三方滚动库或自定义 CSS。
为什么加 padding-right 反而让页面向左跳
Bootstrap 在 show.bs.modal 触发时，会动态计算滚动条宽度（document.body.offsetWidth - document.documentElement.clientWidth），然后给 body 加内联样式 padding-right: 17px（值随系统浮动），同时设 overflow: hidden。但所有 position: fixed 元素（比如 .fixed-top 导航栏、全屏背景图、悬浮按钮）完全不响应这个 padding-right，结果流式内容被推右，fixed 层原地不动，视觉上就是“整个页面向左一缩”。
常见诱因包括：
- 全局 CSS 里写了
body { padding-right: 0 !important }—— 直接覆盖内联样式，补偿失效 - 用了
scrollbar-gutter: stable both或overflow-y: overlay，导致差值为 0，Bootstrap 补了个 0px - 引入了
overlay-scrollbars等第三方滚动库，但 Bootstrap 仍查原生 DOM，宽度检测失准 - 模态框嵌套在某个
overflow: hidden的父容器里，body的padding-right实际未生效
用 data-bs-backdrop="static" 彻底跳过补偿流程
这是最轻量、最安全的解法，适用于不需要点击遮罩关闭的场景（如权限确认、表单提交成功提示、单次操作反馈）。
它会跳过整个滚动条补偿链：不加 modal-open 类、不注入 padding-right、不设 overflow: hidden，只禁用点击遮罩关闭，保留 ESC 键关闭能力。
写法很简单：
<div class="modal" data-bs-backdrop="static"> <!-- 模态框内容 --> </div>
优势明显：
- 不污染任何 CSS 优先级，无兼容性风险
- 不需要监听事件、不手动操作 DOM
- 后续若需支持点击遮罩关闭，只需删掉该属性，无残留副作用
- 避免了 macOS Safari 返回 0 宽度、第三方滚动库冲突等所有计算类问题
必须支持点击遮罩关闭？那就加 .is-fixed 类
Bootstrap 内置了对 position: fixed 元素的同步补偿支持，但前提是显式加 .is-fixed 类——它本身无样式，纯语义钩子，Bootstrap JS 靠它识别并自动增删 padding-right。
所有自定义 fixed 元素都得加：
<nav class="navbar fixed-top is-fixed"></nav><div class="hero-bg is-fixed" style="background-image: url(...) "></div> <button class="btn btn-floating is-fixed"></button>
漏掉任何一个，Modal 打开时就会错位。注意：
-
.is-fixed仅对fixed-top、fixed-bottom、sticky-top和带该类的元素生效 - 不要只靠 CSS 覆盖，比如
.modal-open { padding-right: 0 !important }—— 这个类本身不设padding，真正起效的是body的内联样式 - 多层 Modal 场景下，监听
hidden.bs.modal时，还原paddingRight必须设为空字符串''（不是'0'或'auto'），才能回退到原始 CSS 值
容易被忽略的隐性干扰点
真正难的不是选哪个方案，而是排查有没有第三方库或全局重置 CSS 悄悄改了 body 的 overflow 或内联 padding-right。比如：
-
perfect-scrollbar初始化后可能直接接管body滚动，导致 Bootstrap 的检测逻辑失效 - 某些 UI 框架的 reset.css 里有
body { margin: 0; padding: 0 }，会干扰内联padding-right的叠加效果 - 手写
show/hide逻辑绕过了bootstrap.Modal.getInstance(el).show()，等于放弃整个滚动锁定流程，漏掉modal-open类、漏测真实滚动条宽度、漏清内联样式
建议先用浏览器开发者工具检查 body 元素：打开 Modal 后看是否真有 style="padding-right: ..."，再逐个检查 fixed 元素是否带 .is-fixed，最后确认没有其他 JS 在同一时刻修改 body.style.paddingRight。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
