多层modal嵌套加剧滚动条抖动的根本原因是bootstrap重复执行滚动补偿逻辑且关闭子modal时不保留父modal的padding-right设置；禁用子modal补偿（如加data-bs-backdrop="static"）或手动维护body状态可解决。
为什么多层Modal嵌套会加剧滚动条抖动
根本原因不是“多了一层”，而是Bootstrap每次打开新Modal都会重新执行滚动条补偿逻辑：它会再次计算滚动条宽度、再次给body写内联padding-right、再次切换overflow状态。但关闭子Modal时，它只清空自己那一层的补偿，却不管父Modal还在开着——结果body的padding-right被设回0或错误值，父Modal内容突然“左移”，抖动比单层还明显。
禁用子Modal的滚动补偿（最安全）
子Modal不需要独立控制背景滚动，它的存在本就依赖父Modal已锁定的页面状态。直接跳过它的补偿流程，就能避免重复注入/清除padding-right。
- 在子Modal根元素上加
data-bs-backdrop="static"：它会跳过modal-open类添加、跳过padding-right计算、跳过overflow: hidden设置 - 保留ESC键关闭能力，不影响键盘交互
- 不干扰父Modal的滚动锁定逻辑，也不破坏
.is-fixed类同步行为
手动维持body.modal-open和padding-right
如果子Modal必须支持点击遮罩关闭（即不能用data-bs-backdrop="static"），就得接管状态管理，而不是依赖Bootstrap自动判断。
- 监听子Modal的
hidden.bs.modal事件，检查是否还有其他Modal处于.show状态：if ($('.modal.show').length > 0) { $('body').addClass('modal-open'); } - 还原
paddingRight时，必须设为空字符串''，不能设为'0'或'auto'，否则会覆盖原始CSS值 - 所有fixed元素（如
.navbar.fixed-top）必须带.is-fixed类，否则Bootstrap JS不会为它们同步补偿
滚动容器高度失控导致的二次抖动
多层Modal里常出现.modal-dialog-scrollable内部滚动失效，一滚动底层页面就跟着动——这不是抖动，是高度边界丢失后触发了全局滚动。
-
.modal-body必须有明确的高度约束，比如max-height: 60vh，不能只靠flex或position: absolute子元素撑开 - 避免在
.modal-content上设overflow: hidden，它会截断.modal-backdrop的z-index层级，导致点击穿透 - 移动端需额外阻止
touchmove冒泡：$('#childModal').on('touchmove.bs.modal', e => e.preventDefault());
真正容易被忽略的是：多层Modal场景下，scrollbar-gutter: stable both这类原生方案反而更难落地——因为子Modal的JS初始化可能晚于父Modal，导致gutter预留未生效就进入了补偿逻辑。不如先用data-bs-backdrop="static"切掉子层干扰，再逐层验证fixed元素是否都带.is-fixed。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
