Modal弹出后页面“向左跳”根本原因是Bootstrap为补偿滚动条消失自动给body添加padding-right:17px；禁用滚动应避免直接覆盖样式，而通过data-bs-backdrop="static"或手动控制overflow与modal-open类来实现。
为什么 Modal 弹出后页面会“向左跳一下”
根本原因不是滚动本身，而是 bootstrap 自动给 <body> 加了 padding-right: 17px 来补偿滚动条消失造成的布局偏移。这个补偿只加在右边，左边没动，视觉上就像整个页面被“吸”向左了一点——尤其在宽屏或内容靠左的页面里特别明显。
- 这个行为由
modal-open类触发，和overflow: hidden同时生效 - 17px 是典型值，实际取决于用户浏览器滚动条宽度（比如 macOS 的常隐藏滚动条可能为 0）
- 如果你用的是自定义滚动条（如
scrollbar-width: none），这个补偿反而成了多余干扰
禁用滚动但不触发“左移抖动”的两种可靠方式
最稳的做法不是强行覆盖 padding-right，而是从源头绕过补偿逻辑：
- 给 modal 元素加
data-bs-backdrop="static"属性，它会跳过滚动条补偿，同时保留遮罩层（只是不能点击遮罩关闭） - 如果必须支持点击遮罩关闭，就手动接管：监听
show.bs.modal事件，用document.body.style.overflow = 'hidden'禁滚动，但**不加modal-open类**，也**不设 padding** - 注意：别用
overflow: hidden !important直接覆盖 CSS，容易和多层 modal 冲突（比如第二层打开时 body 已经是 hidden，再关第一层会意外恢复滚动）
Modal 内容要滚动，但背景不能滚 —— 关键在高度控制
很多人以为只要禁了 body 滚动，modal 就自动可滚，其实不是。modal 本体默认 overflow: hidden，内容超长照样被截断。
- 给 modal 的内容区（通常是
.modal-body）设max-height: 60vh+overflow-y: auto - 避免直接给
.modal-dialog或.modal-content设固定高，它们需要随内容弹性收缩 - 移动端要注意：iOS Safari 对
vh单位有视口缩放 bug，可改用max-height: calc(100vh - 200px)（减去 header/footer 高度）
多层 Modal 场景下滚动状态容易“断连”
Bootstrap 默认逻辑是：任意一个 modal 关闭 → 移除 modal-open → body 恢复滚动。这在嵌套弹窗时会导致上层 modal 还开着，但背景却能滚了。
- 解决方法是监听非顶层 modal 的
hidden.bs.modal事件，检查是否还有其他 modal 在显示，如果是，就手动重加modal-open到 body - 别依赖
$('body').hasClass('modal-open')做判断，因为类名可能被其他插件污染；改用$('.modal.show').length > 0 - 如果项目用了 Vue/React，这类状态管理建议交给组件逻辑，而不是靠 jQuery 事件硬 patch
真正麻烦的不是“怎么禁滚动”，而是滚动禁用/恢复的时机、范围、嵌套关系——稍不注意，就会在 iOS 上滑两下突然滚到顶部，或者关掉子弹窗后父弹窗内容卡死。这些细节没法靠一行 CSS 解决。
