Bootstrap 5.3 Lightbox弹窗打开时页面滚动问题求助

• 利用Bootstrap Modal原生锁定机制：Bootstrap Modal打开时默认会给<body>添加modal-open类，该类会通过overflow: hidden锁定页面滚动。如果你的Lightbox未触发这个逻辑，手动绑定事件实现：

  1. 监听弹窗打开事件，给body添加类并处理滚动条偏移：

     document.addEventListener('show.bs.modal', function (e) {
       document.body.classList.add('modal-open');
       // 抵消滚动条消失导致的页面偏移
       document.body.style.paddingRight = window.innerWidth - document.documentElement.clientWidth + 'px';
     });
     

  2. 监听弹窗关闭事件，移除类和临时样式：

     document.addEventListener('hide.bs.modal', function (e) {
       document.body.classList.remove('modal-open');
       document.body.style.paddingRight = '';
     });
     

• 强制覆盖冲突样式：如果自定义CSS或Lightbox样式干扰了body的滚动设置，直接强制锁定：

  body.modal-open {
    overflow: hidden !important;
    position: fixed !important;
    width: 100% !important;
  }
  

  若担心fixed导致页面跳回顶部，可结合滚动位置记录优化：

  let scrollPosition = 0;
  document.addEventListener('show.bs.modal', function (e) {
    scrollPosition = window.pageYOffset || document.documentElement.scrollTop;
    document.body.style.top = -scrollPosition + 'px';
    document.body.classList.add('modal-open');
  });
  document.addEventListener('hide.bs.modal', function (e) {
    document.body.classList.remove('modal-open');
    window.scrollTo(0, scrollPosition);
    document.body.style.top = '';
  });
  

• 检查Lightbox配置项：部分Lightbox插件自带禁用页面滚动的参数，比如Bootstrap Modal的scrollable选项，设置为false即可：

  new bootstrap.Modal(document.getElementById('your-lightbox-id'), {
    scrollable: false
  });
  

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