Layui弹出层如何禁用背景页面的鼠标滑轮滚动-Layui教程-PHP中文网

scrollbar: false 仅隐藏弹层滚动条，不能禁用 document 滚动；需配合 body/html overflow: hidden、scrollTop 缓存与恢复，及移动端 touch-action: none 才能彻底解决滚动穿透问题。

scrollbar: false 为什么有时不生效

只设 scrollbar: false 并不能完全禁用背景滚动，尤其在长页面中滚动到中间位置再打开弹层时，鼠标滚轮仍会触发底层 document.body 或 document.documentelement 的滚动。这是因为 layer 默认只控制自身容器的 overflow，不干预 document 级别的滚动行为。

常见错误现象包括：弹层已打开，但滚轮一动，页面就往上/下跳；关闭弹层后 scrollTop 丢失，页面回到顶部。

scrollbar: false 仅隐藏弹层区域的滚动条，不冻结 document 滚动
移动端和部分桌面浏览器（如 Safari、旧版 Edge）对 body { overflow: hidden } 支持不一致，单设 body 不够
未保存/恢复 scrollTop，导致关闭后页面“闪回”顶部

必须同时操作 body 和 html 节点

实测有效的做法是：在 layer.open() 的 success 回调里锁定两个节点，并缓存当前滚动位置；在 end 回调里还原。

示例代码：

深蓝色网站后台管理系统layui框架模板-AdminPro

一款深蓝色网站后台管理系统layui框架模板

下载

layer.open({
  type: 1,
  content: $('#myDialog'),
  area: ['500px', '400px'],
  scrollbar: false,
  success: function(layero, index) {
    // 保存滚动位置
    const scrollTop = $(window).scrollTop();
    layer.data('scrollTop', scrollTop);
    
    // 锁定 body + html
    $('body').css('overflow', 'hidden');
    $('html').css('overflow', 'hidden');
    
    // 防止 iOS Safari 滚动穿透（可选）
    $('body').css('position', 'fixed');
    $('body').css('top', -scrollTop + 'px');
  },
  end: function() {
    // 还原 body 样式
    const scrollTop = layer.data('scrollTop') || 0;
    $('body').css({
      'overflow': '',
      'position': '',
      'top': ''
    });
    $('html').css('overflow', '');
    
    // 恢复滚动位置（注意 setTimeout 避免渲染冲突）
    setTimeout(() => {
      $(window).scrollTop(scrollTop);
    }, 10);
  }
});

移动端额外要防 touchmove 穿透

即使加了 overflow: hidden，iOS 和部分安卓 WebView 在手指滑动时仍可能穿透到背景页。这不是 Layer 的 bug，而是浏览器对 touch 事件的默认冒泡行为。

如果弹层是纯静态内容，最简方案是在遮罩层（.layui-layer-shade）上加 ontouchmove="return false"
若弹层内需支持内部滚动（如长列表），改用 CSS touch-action: none 更稳妥：$('.layui-layer-shade').css('touch-action', 'none')
避免使用 @touchmove.stop.prevent（Vue 语法），Layui 原生环境不识别