页面抖动是bootstrap为补偿滚动条消失而给body加padding-right所致，但未同步处理fixed元素、自定义滚动容器及第三方插件，导致视觉偏移；解决方式包括添加.is-fixed类、使用data-bs-backdrop="static"或手动控制overflow。
页面抖动不是 CSS 写错了，是 Bootstrap 主动加的 padding-right 补偿逻辑在起作用——它想填平滚动条消失造成的宽度缺口，但只动了 body，没管 position: fixed 元素，也没考虑你自定义的滚动容器或第三方 scrollbar 插件。
为什么 modal 打开时页面会“向左一缩”
Bootstrap 5 默认在 show 时给 body 加 modal-open 类，并设置 padding-right: 17px（实际值取决于浏览器滚动条宽度）。这个补偿本意是防止内容因滚动条消失而右移，但它只作用于 body 流式内容，fixed 导航栏、全屏背景图等元素没同步右移，视觉上就像整个页面被“吸”向左了一点。
- macOS Safari 滚动条常为 0 宽度，补偿反而造成多余偏移
- 用了
overlay-scrollbars或perfect-scrollbar？它们接管原生滚动，document.body.offsetWidth - document.documentElement.clientWidth返回 0，Bootstrap 就不补，但body仍被设overflow: hidden，结果就是宽度突变 - 全局写了
body { padding-right: 0 !important }？直接覆盖了补偿逻辑，抖动更明显
fixed 元素错位：加 .is-fixed 类就解决
Bootstrap 5 内置了对 position: fixed 元素的补偿支持，但前提是显式加 .is-fixed 类。它本身无样式，只是个钩子，Bootstrap JS 会监听 modal-open 状态，自动为带该类的元素同步增减 padding-right。
<nav class="navbar fixed-top is-fixed"></nav><header class="hero-banner is-fixed"></header>- 不加
.is-fixed→ 导航栏跳；加了 → 补偿自动对齐，无感
不想用 padding 补偿？换 data-bs-backdrop="static"
这是最干净的绕过方式：禁用点击遮罩关闭 + 跳过滚动条宽度检测 + 不触发 padding-right 注入。背景仍不可滚（overflow: hidden 由 JS 直接设），但不再抖。
- 单模态场景下，直接在 modal 标签加属性：
<div class="modal" data-bs-backdrop="static"> <li>需要 ESC 关闭？没问题，<code>data-bs-backdrop="static"不影响键盘行为 - 多层 modal？慎用——第二层打开时第一层若设了
static，关闭它不会恢复背景滚动，得手动检查$('.modal.show').length并控制body.style.overflow - 根本解法：给每个 modal 元素加
style="overflow: auto"，脱离对.modal-open的样式依赖 - 或者，在
shown.bs.modal里手动设document.querySelector('.modal.show .modal-body').style.maxHeight = '60vh'并配overflow-y: auto - 避免写
body { overflow: hidden !important }—— 多层打开时容易冲突，关掉一层就意外恢复滚动
多层 modal 关闭后滚动条消失：别依赖 .modal-open 控制滚动
Bootstrap 默认逻辑是“任意一个 modal 关闭 → 移除 modal-open → body 恢复滚动”，这在嵌套场景下会导致上层还在显示，但背景已能滚，且所有 modal 的 overflow-y 都失效（因为 .modal-open .modal 规则失效）。
真正麻烦的不是抖动本身，而是抖动背后混杂了滚动容器、fixed 元素、第三方插件、多层状态四个维度的交互。修一个地方可能撬动另一个，建议先用 data-bs-backdrop="static" 快速验证是否是补偿逻辑导致，再决定要不要深入 patch .is-fixed 或接管 body.style.overflow。
