Bootstrap模态框切换时滚动条异常抖动问题求助

嘿，这个问题我之前也碰到过，咱们一步步拆解原因和解决办法：

问题根源 #

Bootstrap模态框的默认机制是这样的：

• 当模态框显示时，会给<body>添加modal-open类，同时移除页面的垂直滚动条（避免背景滚动）
• 当模态框关闭时，会移除modal-open类，恢复页面滚动条

你在切换「登录→找回密码」模态框时，本质是先关闭第一个模态框、再打开第二个。这两个动作之间存在短暂的时间间隙：第一个模态框关闭后，modal-open类被移除，页面滚动条瞬间恢复；紧接着第二个模态框打开，又把滚动条去掉。这种页面宽度的瞬间变化（滚动条占了约15-20px宽度）就会导致模态框出现抖动，滚动条也会短暂消失。

哪怕你加了setTimeout，本质上只是延迟了modal-open的添加，反而可能拉长了这个间隙，让问题更明显；而不加的话，Bootstrap内部的事件触发顺序也会产生这个微小的时间差。

解决办法 #

这里有几个实用的方案，按推荐程度排序：

1. 无缝切换模态框（最优解） #

不要等第一个模态框完全关闭再打开第二个，而是在它开始关闭的瞬间就触发第二个模态框的显示。这样<body>的modal-open类会被第二个模态框立刻续上，不会出现间隙。

假设你的登录模态框id是loginModal，找回密码模态框id是forgotPasswordModal，代码可以改成这样：

$(document).ready(function() {
  // 监听登录模态框的"开始隐藏"事件
  $('#loginModal').on('hide.bs.modal', function() {
    // 立刻打开找回密码模态框
    $('#forgotPasswordModal').modal('show');
  });
  
  // 可以移除之前的setTimeout代码了，现在不需要手动维护modal-open类
});

2. 强制页面始终显示滚动条 #

通过CSS让页面无论内容多少都显示垂直滚动条，这样滚动条不会在切换时消失/出现，页面宽度保持稳定，模态框自然不会抖动：

body {
  overflow-y: scroll !important;
}

这个方案的缺点是如果页面内容不足时，会显示空的滚动条，但对用户体验影响很小，实现成本极低。

3. 手动控制body的样式 #

如果你不想强制显示滚动条，可以在模态框切换过程中手动维护<body>的样式，避免滚动条变化：

$(document).ready(function() {
  let isSwitchingModal = false;

  $('.modal').on('hide.bs.modal', function() {
    if (!isSwitchingModal) {
      // 标记正在切换模态框
      isSwitchingModal = true;
      // 手动保持body的modal-open类和overflow:hidden
      $('body').addClass('modal-open').css('overflow', 'hidden');
      
      // 打开目标模态框（这里需要你根据实际情况指定要打开的模态框）
      $('#forgotPasswordModal').modal('show');
    }
  });

  $('.modal').on('shown.bs.modal', function() {
    // 切换完成后取消标记
    isSwitchingModal = false;
  });
});

内容的提问来源于stack exchange，提问作者Janath