layer.open 的 scrollbar: false 导致页面滚动条“意外消失”主因是残留 layui-layer-open 类或未正常关闭弹层；body 被误加 padding-right 且无滚动条时会偏移内容；移动端需用 document.scrollingElement.scrollHeight 替代 $(document).height()；遮罩层高度须设为文档总高而非视口高。

layer.open 设置了 scrollbar: false 但页面滚动条“意外消失”

这是最常见的情况：你没主动设 scrollbar: false，但弹窗一打开，背景页面就没了滚动条——大概率是其他 layer 实例残留的 layui-layer-open class 还挂在 <body> 上，或者上一次调用时显式传了 scrollbar: false 却没正常关闭。

检查方法很简单：打开开发者工具，选中 <body> 元素，在 Styles 面板里搜 layui-layer-open。如果存在，说明有 layer 没 clean up。

• 手动触发 layer.closeAll() 清掉所有未关闭弹层（适合调试或初始化阶段）
• 确保每个 layer.open() 都配对了明确的 layer.close(index)，尤其在 yes、cancel 回调里别漏掉
• 避免在 success 或 end 回调里重复调用 layer.open() 而不关前一个（比如表单校验失败后重开弹窗）

body 被加了 padding-right 却没滚动条可滚

当 layer 检测到需要隐藏滚动条（scrollbar: false），它会自动给 <body> 加 padding-right: 17px 来补偿滚动条宽度。但如果此时页面本就没有纵向滚动条（比如内容很短），这个 padding 就纯属“白加”，不仅没意义，还可能把右侧内容挤偏，甚至让本来该出现的滚动条被误判为“不需要”。

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

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

下载

• 先确认页面是否真有足够高度触发滚动：$(document).height() > $(window).height()
• 如果只是临时弹窗，且页面本身无需滚动，直接传 scrollbar: true（显式声明，覆盖默认逻辑）
• 若必须用 scrollbar: false，可在弹窗关闭后手动清理：

  layer.close(index);
  $('body').removeClass('layui-layer-open').css('padding-right', '');
  

移动端 Safari 或某些 WebView 中滚动条“不可见但可滚”

这不是 bug，是渲染机制：iOS Safari 在 body { overflow: hidden } 下，会彻底禁用滚动检测，导致 document.body.scrollHeight 返回视口高，$(document).height() 失效，进而让一些依赖高度判断的逻辑（比如自适应遮罩）误以为“不需要滚动条”。

• 不要依赖 $(document).height() 做条件判断，改用 document.scrollingElement?.scrollHeight
• 如果页面内容动态加载（如表格分页后变长），需在数据渲染完成后再调用 layer.style(index, { ... }) 或手动重算遮罩高度
• 极简验证法：在弹窗打开后，执行 console.log(document.scrollingElement?.scrollHeight, window.innerHeight)，看差值是否合理

遮罩层（.layui-layer-shade）高度不够，误判滚动区域

遮罩层高度默认按 $(window).height() 设，但如果页面有纵向滚动且内容很长，遮罩只盖住视口部分，用户向下滚动后，底部就“裸奔”了——这时浏览器可能悄悄恢复 body 的滚动能力，造成滚动条闪现又消失的错觉。

• 必须用 $(document).height() 或 document.scrollingElement.scrollHeight 设置遮罩高度
• 推荐在 success 回调里延迟设置（确保 DOM 已挂载）：

  success: function(layero, index) {
    setTimeout(() => {
      const shade = $('.layui-layer-shade');
      if (shade.length) {
        shade.height($(document).height());
      }
    }, 10);
  }
  

• 监听 window.resize 和内容变化（如 MutationObserver），动态更新遮罩高度——否则折叠面板展开、分页加载后，问题重现

真正卡住的地方，往往不是“怎么让它出现”，而是“为什么它被悄悄移除了又没补上”。每次弹窗关闭后，多看一眼 <body> 的 class 和 style，比反复查配置更管用。