Lightbox禁用滚动失效求助：设置'disableScrolling':true仍可滚动

我之前也遇到过这个糟心的问题！明明设置了disableScrolling: true，也给body加了overflow: hidden，页面居然还能滚，折腾了好一阵才找到几个靠谱的解决办法，你可以试试：

• 排查页面内的其他可滚动元素
  有时候问题不是出在body上，而是页面里某个容器（比如带overflow: auto/scroll的div）还能独立滚动。打开浏览器开发者工具，挨个检查元素的滚动属性，在Lightbox开启时，给这些容器也加上overflow: hidden样式。

• 用JS直接阻止滚动事件（CSS兜底）
  部分浏览器对body { overflow: hidden }的支持有差异，尤其是移动端。可以通过绑定事件监听器，直接阻止滚动行为：

  // 定义禁用滚动的函数
  function lockScroll() {
    // 阻止触摸滚动
    document.body.addEventListener('touchmove', stopScroll, { passive: false });
    // 阻止鼠标滚轮滚动
    document.body.addEventListener('wheel', stopScroll, { passive: false });
  }
  
  function stopScroll(e) {
    e.preventDefault();
  }
  
  // 定义恢复滚动的函数
  function unlockScroll() {
    document.body.removeEventListener('touchmove', stopScroll);
    document.body.removeEventListener('wheel', stopScroll);
  }
  

  然后在Lightbox的打开回调里调用lockScroll()，关闭时调用unlockScroll()。

• 强化lb-disable-scroll类的CSS优先级
  可能你的自定义类样式被其他优先级更高的CSS覆盖了，试试给类加更强制的属性：

  .lb-disable-scroll {
    overflow: hidden !important;
    position: fixed !important; /* 固定body位置，彻底阻止滚动 */
    width: 100% !important;
    height: 100vh !important;
  }
  

  这里的position: fixed是关键，它能让body完全固定在视口，避免因页面过长导致的滚动残留。

• 利用Lightbox自带的回调控制滚动
  放弃依赖Lightbox自带的disableScrolling，改用它的onOpen和onClose回调来手动控制：

  // 初始化Lightbox时配置
  lightbox.option({
    'disableScrolling': false, // 关闭自带的滚动禁用
    'onOpen': function() {
      lockScroll(); // 调用前面的禁用函数
      document.body.classList.add('lb-disable-scroll');
    },
    'onClose': function() {
      unlockScroll();
      document.body.classList.remove('lb-disable-scroll');
    }
  });
  

按这个流程排查，先找有没有其他滚动容器，再结合CSS和JS双管齐下，应该就能解决问题了！

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