Bootstrap 4模态框切换时浏览器滚动条消失问题求助

这个问题我之前也碰到过，本质是Bootstrap 4的模态框管理逻辑在多模态框切换时的小bug——它会错误地在关闭第二个模态框后，移除body上的modal-open类或者修改overflow样式，导致第一个模态框的滚动功能异常。下面给你几个可行的解决方案：

方案一：手动控制body的模态框状态 #

通过监听模态框的切换事件，强制维护body的modal-open类和对应的padding样式，确保只要有模态框处于显示状态，body就保持正确的样式：

// 监听所有模态框的显示事件
$('.modal').on('show.bs.modal', function() {
  // 添加modal-open类，阻止背景滚动
  $('body').addClass('modal-open');
  // 计算滚动条宽度，设置padding-right避免页面抖动
  const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
  $('body').css('padding-right', `${scrollbarWidth}px`);
});

// 监听所有模态框的隐藏事件
$('.modal').on('hidden.bs.modal', function() {
  // 检查是否还有其他模态框处于显示状态
  const hasActiveModal = $('.modal.show').length > 0;
  if (!hasActiveModal) {
    // 没有活跃模态框时，恢复body样式
    $('body').removeClass('modal-open');
    $('body').css('padding-right', '');
  } else {
    // 还有活跃模态框，强制保持状态
    $('body').addClass('modal-open');
    const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
    $('body').css('padding-right', `${scrollbarWidth}px`);
  }
});

方案二：针对特定模态框的切换逻辑优化 #

如果你的场景只有两个模态框，可以更精准地控制它们的切换过程，避免Bootstrap误判：

假设第一个模态框id是#modal1，第二个是#modal2，打开第二个模态框的按钮id是#open-modal2-btn：

// 自定义打开第二个模态框的逻辑
$('#open-modal2-btn').click(function() {
  // 隐藏第一个模态框，但不触发完整的关闭逻辑
  $('#modal1').modal('hide');
  // 显示第二个模态框
  $('#modal2').modal('show');
  // 强制保持body的模态状态
  $('body').addClass('modal-open');
  const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
  $('body').css('padding-right', `${scrollbarWidth}px`);
});

// 第二个模态框关闭时，恢复第一个模态框
$('#modal2').on('hidden.bs.modal', function() {
  $('#modal1').modal('show');
  // 再次确认body的状态
  $('body').addClass('modal-open');
  const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
  $('body').css('padding-right', `${scrollbarWidth}px`);
});

方案三：确保模态框内容的滚动样式不丢失 #

有时候滚动条消失是因为模态框的.modal-content元素的overflow样式被意外重置，你可以强制锁定它的滚动属性：

/* 在你的自定义CSS中添加 */
.modal-content {
  overflow-y: auto !important;
  max-height: calc(100vh - 100px) !important; /* 限制最大高度，确保滚动条出现 */
}

配合前两个方案的JS逻辑，基本就能彻底解决这个问题了。

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