bootstrap 5+模态框通过动态计算body滚动条宽度并添加padding-right补偿，但fixed元素不受影响导致页面抖动；推荐使用.is-fixed类同步补偿，或禁用补偿逻辑。
为什么加 padding-right 反而让页面抖动
Bootstrap 5+ 在模态框显示时主动给 body 加 padding-right，本意是填平滚动条消失造成的宽度缺口——但这个补偿只作用于 body 的流式内容，对 position: fixed 元素（比如顶部导航栏、侧边栏）完全无效。结果就是：内容区被“推右”了，fixed 元素原地不动，视觉上像整个页面向左一缩，这就是抖动的实质。
更麻烦的是，这个宽度不是写死的，而是靠 document.body.offsetWidth - document.documentElement.clientWidth 动态算出来的。一旦你用了 scrollbar-gutter: stable both、overflow-y: overlay，或者引入了 overlay-scrollbars 这类第三方滚动库，这个差值就变成 0，Bootstrap 就不补或补错，抖动反而更难预测。
用 .is-fixed 类同步 fixed 元素的 padding 补偿
这是 Bootstrap 5 内置的、最轻量也最可靠的解法：它不改逻辑，只补漏。只要你在所有需要跟随补偿的 fixed 元素上显式加上 .is-fixed 类，Bootstrap 的 scrollbar.js 就会在 modal-open 生效时，自动为这些元素同步增减 padding-right。
<nav class="navbar fixed-top is-fixed"></nav><div class="hero-bg is-fixed" style="background-image: url(...) "></div>-
.is-fixed是纯语义类，本身无 CSS 规则，不影响非 modal 场景 - 它只对
fixed-top、fixed-bottom、sticky-top和带.is-fixed的元素生效
禁用补偿逻辑的两种安全方式
如果你的布局已经用 scrollbar-gutter: stable both 预留了滚动条空间，或者根本不需要背景锁定（比如弹窗本身就是全屏操作），那就该跳过补偿，而不是硬覆盖它。
- 在 modal 根元素上加
data-bs-backdrop="static"：它会跳过padding-right注入和overflow: hidden设置，同时保留 ESC 关闭能力 - 手动重写
Modal.prototype.checkScrollbar方法，返回固定宽度（如16），避免依赖 DOM 计算（适用于必须保留 backdrop 点击关闭，又无法改 HTML 属性的场景） - 绝对不要只写
.modal-open { padding-right: 0 !important; }—— 这会让body在 modal 关闭后仍残留modal-open类，后续滚动直接错位
手写 show/hide 逻辑时最容易漏掉的三件事
绕过 bootstrap.Modal.getInstance(el).show() 直接操作 class 或 style，等于放弃整个滚动锁定流程。以下三点漏掉任一，抖动就会重现：
- 忘了加
document.body.classList.add('modal-open') - 没测真实滚动条宽度，直接写死
document.body.style.paddingRight = '17px'（Windows/Chrome/macOS/Safari 下宽度不同） - 监听
hidden.bs.modal后，只删 class 却没还原paddingRight，或设成''（空字符串）而非undefined，导致内联样式残留
真正容易被忽略的，是嵌套 modal 场景下 modal-open 的移除时机——Bootstrap 默认“任意一个 modal 关闭就清空”，但上层 modal 还在显示时，背景已可滚动，且所有 .modal 的 overflow-y 都失效。这时候得靠每个 modal 自己控制 style="overflow: auto"，脱离对 .modal-open 的样式依赖。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
