根本原因是body加overflow:hidden后滚动条消失导致内容宽度突变而左跳；需用动态获取的scrollbarwidth补偿padding-right，关闭时及时恢复，移动端宜用innerwidth与documentelement.clientwidth差值判断。
模态框打开时页面向左跳动是什么原因
根本原因是 body 在模态框显示时被加上了 overflow: hidden，导致浏览器隐藏原生滚动条——而滚动条宽度（通常 12–17px）突然消失，body 内容实际可用宽度变大，页面视觉上“向左抖一下”。
用 padding-right 补偿滚动条宽度的实操要点
Bootstrap 5+ 默认已内置该逻辑（通过 bs-modal-scrollbar-measure 类动态计算并设置 padding-right），但手动干预仍常见于以下场景：
- 自定义模态框未启用 Bootstrap 的 modal 实例（比如纯 HTML + CSS 模拟）
- 使用了第三方 UI 库覆盖了 Bootstrap 的 body 样式
- 模态框嵌套或在
position: fixed容器中触发，导致body未被正确标记
手动补偿时，不要硬编码 padding-right: 15px。应优先读取真实滚动条宽度：
function getScrollbarWidth() {
const outer = document.createElement('div');
outer.style.visibility = 'hidden';
outer.style.overflow = 'scroll';
outer.style.msOverflowStyle = 'scrollbar'; // IE
document.body.appendChild(outer);
<p>const inner = document.createElement('div');
inner.style.width = '100%';
outer.appendChild(inner);</p><p>const width = outer.offsetWidth - inner.offsetWidth;
document.body.removeChild(outer);
return width;
}</p>
然后在 show.bs.modal 事件中设置：
document.addEventListener('show.bs.modal', e => {
const scrollbarWidth = getScrollbarWidth();
document.body.style.paddingRight = `${scrollbarWidth}px`;
document.body.style.overflow = 'hidden';
});
为什么直接改 body 的 padding-right 有时无效
常见失效原因包括：
-
body有margin或border干扰盒模型计算 - 父级容器（如
#app）设置了overflow: hidden，导致body的 overflow 设置被忽略 - CSS 中存在
body { padding-right: 0 !important }类似强覆盖规则 - 模态框由 Vue/React 等框架动态挂载，事件监听时机过早（DOM 尚未就绪）
更稳妥的做法是：不在 body 上设 padding，而是给一个包裹 body 内容的 <div class="page-content">，并在模态框显示时给它加 <code>padding-right，避免污染全局 body 样式。
移动端和 Safari 的特殊处理
iOS Safari 和部分 Android 浏览器不显示常驻滚动条，getScrollbarWidth() 返回 0，此时强行加 padding-right 反而造成右侧空白。应增加 UA 判断或改用 document.body.clientWidth - document.documentElement.clientWidth 获取“隐藏滚动条导致的布局差值”：
const scrollWidth = window.innerWidth - document.documentElement.clientWidth;
这个值在桌面端 ≈ 滚动条宽度，在移动端通常为 0，更可靠。
真正容易被忽略的是：模态框关闭后必须恢复 padding-right 和 overflow，且要确保恢复逻辑在 hidden.bs.modal 之后执行——如果用户快速连续开关模态框，异步恢复可能滞后，导致短暂错位。
