JavaScript弹出层防止背景滚动穿透的实现方法

一、滚动穿透的产生机制与技术本质

在网页开发中，当一个固定在屏幕上方的模态弹出层（Modal / Dialog）打开时，用户在弹出层区域执行滚动或滑动手势，底部的页面主体内容依然会发生滚动甚至页面回弹，这种现象被称为“滚动穿透”（Scroll Chaining 或 Scroll Penetration）。

滚动穿透之所以发生，根源在于浏览器的滚动行为与 DOM 事件模型的默认传递机制：

• 默认行为传递（Scroll Chaining）：当子容器处于滚动极值点（即已经滚动到最顶部或最底部）时，后续的滚动物理动能并不会被丢弃，而是被浏览器视口链式传递到父级容器直至 document.body。
• 遮罩层无滚动能力：若弹出层的半透明遮罩背景本身没有设置可滚动区域，用户的滑动手势在当前元素上无处消耗，浏览器会直接将滚动动量委派给下方的可滚动页面。
• 移动端 touch 事件的合成：在移动端（特别是 iOS WebKit），滚动的平滑橡皮筋动画是在独立的合成线程中完成的。单纯在 DOM 层级修改 CSS 样式，往往无法阻断手势在原生视口上的回弹计算。

二、四种防穿透技术方案的原理与边界

不同场景下，控制页面滚动有不同的实现路径。理解各方案的生效条件和限制，是选择技术路线的前提。

1. 方案一：CSS overflow: hidden

最直观的做法是在弹窗打开时为 body 元素添加 overflow: hidden 样式，关闭时清空该样式：

// 打开弹窗
document.body.style.overflow = 'hidden';

// 关闭弹窗
document.body.style.overflow = '';

局限性：该方法在 PC 端浏览器和 Android 设备上大多有效，但在 iOS Safari 下存在严重缺陷。iOS Safari 并不会因为 body 上设置了 overflow: hidden 就阻断原生视口的手势响应，用户快速滑动时依然能看到背景抖动与橡皮筋反弹；此外在 PC 端，滚动条突然消失会导致页面内容瞬间向右偏移（Layout Shift），引发视觉跳动。

2. 方案二：CSS overscroll-behavior: contain

现代 CSS 规范引入了 overscroll-behavior 属性，用于明确声明元素在滚动到边界时的行为。给弹窗的可滚动节点设置此属性，可以原生切断滚动链接：

.modal-scrollable-content {
  overflow-y: auto;
  overscroll-behavior: contain;
}

局限性：该属性只能控制“容器滚到边缘时不向外冒泡”，但如果用户直接在不可滚动的半透明背景遮罩上滑动，overscroll-behavior 无法发挥作用；同时，在一些旧版本移动端系统及国内混合应用内置 WebView 中存在兼容性断层。

3. 方案三：拦截触摸手势事件（e.preventDefault）

在移动端，通过监听弹窗遮罩层的 touchmove 事件并调用 preventDefault，直接阻断默认的滚动响应：

const mask = document.querySelector('.modal-mask');
mask.addEventListener('touchmove', function(e) {
  e.preventDefault();
}, { passive: false });

局限性：必须显式传入 { passive: false }，否则现代浏览器会忽略 preventDefault()。更关键的是，如果弹窗内部自身包含需要长滚动的条款文本或列表，此方法会由于事件冒泡导致内部也无法滚动，需要繁琐地在内部可滚动区域计算 scrollTop、scrollHeight 和手势方向来进行边界放行。

4. 方案四：动态固定定位（position: fixed）

这是业内公认兼容性最好、适用场景最广泛的工业级方案。其核心原理是：当弹窗打开时，读取当前页面的真实滚动距离，将 body 变为 fixed 脱离文档流，并利用 CSS 负 top 将其锁定在原有视觉位置；弹窗关闭时，解除 fixed 定位，再利用 window.scrollTo 瞬间还原页面滚动位置。

三、核心实现：动态 Fixed 定位法的实战编写

为了保证在移动端长页面上点击弹窗后背景不回弹、关闭后视图不跳动，动态 Fixed 定位方案包含六个严格的生命周期步骤：

代码实现与封装

以下是可直接复用的模块化 JavaScript 实现。我们将锁定的状态与操作封装为 scrollLock 对象，支持嵌套调用安全管理：

/**
 * 页面滚动锁定控制器
 */
const scrollLock = (() => {
  let scrollY = 0;
  let lockCount = 0; // 支持多层弹窗嵌套计数

  return {
    lock() {
      lockCount++;
      if (lockCount > 1) {
        // 已有弹窗锁定时，无需重复设置 body 样式
        return;
      }

      // 1. 获取当前页面滚动的纵坐标（兼容写法）
      scrollY = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;

      // 2. 锁定 body：固定定位并使用负 top 保持视觉停顿
      document.body.style.position = 'fixed';
      document.body.style.top = `-${scrollY}px`;
      document.body.style.width = '100%';
      document.body.style.overflowY = 'scroll'; // 避免 PC 端移除滚动条引起布局跳动
    },

    unlock() {
      if (lockCount <= 0) return;
      lockCount--;

      if (lockCount === 0) {
        // 3. 释放样式
        document.body.style.position = '';
        document.body.style.top = '';
        document.body.style.width = '';
        document.body.style.overflowY = '';

        // 4. 恢复滚动高度（无动画瞬间恢复，避免闪烁）
        window.scrollTo({
          top: scrollY,
          left: 0,
          behavior: 'instant'
        });
      }
    }
  };
})();

四、进阶体验优化：滚动条宽度与多层弹窗治理

1. PC 端滚动条消失导致的布局跳动（Layout Shift）

在桌面浏览器上，垂直滚动条通常占据 15px ~ 17px 的固定宽度。当 body 滚动被锁定时，如果滚动条直接消失，页面可视宽度突然变大，居中布局的页面（如内容区设置了 margin: 0 auto）会出现向右跳动的顿挫感。

解决该问题有两种标准手段：

1. 动态计算滚动条宽度并追加 padding：在锁定前计算 window.innerWidth - document.documentElement.clientWidth，若大于 0 则在 body 上临时追加同等数值的 padding-right。
2. 现代 CSS 属性：在全局 CSS 中声明 scrollbar-gutter: stable;，提前为视口预留滚动条槽位，从根源消除抖动。

// 动态补偿滚动条宽度的完整计算
function getScrollbarWidth() {
  return window.innerWidth - document.documentElement.clientWidth;
}

// 在 lock() 中加入补白
const barWidth = getScrollbarWidth();
if (barWidth > 0) {
  document.body.style.paddingRight = `${barWidth}px`;
}

// 在 unlock() 中还原
document.body.style.paddingRight = '';

2. 嵌套弹窗与调用计数器

在实际业务中，常常出现弹窗上方再次唤起确认提示窗（Confirm Dialog）的场景。如果每次打开弹窗都盲目记录 scrollY，第二个弹窗打开时读取到的 scrollY 将会是 0（因为此时 body 已经被固定），关闭第二个弹窗时若执行恢复，页面将直接被滚动到顶部。

上述模块中引入的 lockCount 计数器正是为了解决这一隐患：只有当计数器从 0 变为 1 时才记录位置并锁定；只有当计数器归零时才解除锁定并还原视口。

五、业务场景防穿透技术选型指南

并非所有业务都需要最复杂的锁定脚本。根据项目平台属性与弹窗自身的结构复杂度，可以参考以下决策树选择适配度最高的实现方式：

各方案横向评测总结

在实际项目工程化落地时，建议将动态 Fixed 定位法结合计数器逻辑封装为通用的 UI 基础组件库能力，使各个业务弹窗只需在打开与销毁生命周期钩子中调用 lock() 与 unlock()，从而在各类复杂机型与交互链条中彻底杜绝背景滚动穿透问题。