前端弹窗遮罩层背景滚动穿透问题及三种解决方案

前端弹窗遮罩层背景滚动穿透问题及三种解决方案

问题原理分析

当弹窗打开时，如果背景页面仍然可以滚动，会严重影响用户体验。这通常被称为'滚动穿透（Scroll Penetration）'。

其核心原理涉及 DOM 层级和事件冒泡：遮罩层虽然盖住了背景，但滚动事件未被拦截，浏览器认为用户仍可滚动。特别是在移动端，惯性滚动会导致手指抬起后页面继续滑动。此外，iOS 的 WebKit 内核存在'橡皮筋效果'（Rubber Band Effect），即页面滑到顶或底时的回弹动画，这可能导致 overflow: hidden 在某些情况下失效。

方案一：修改 Body 样式

这是最通用的办法。思路是弹窗打开时将 body 的 overflow 设为 hidden，记录当前 scrollTop；关闭时还原。

// 状态管理对象
let scrollLocker = {
  scrollTop: 0,
  originalStyle: '',
  isLocked: false
};

/**
 * 锁定背景滚动
 */
function lockBodyScroll() {
  if (scrollLocker.isLocked) return;
  // 记录当前滚动位置
  scrollLocker.scrollTop = window.pageYOffset || document.documentElement.scrollTop;
  const body = document.body;
  scrollLocker.originalStyle = body.getAttribute('style') || '';
  
  // 设置 fixed 定位防止页面跳动
  body.style.cssText = `
    position: fixed;
    top: -${scrollLocker.scrollTop}px;
    left: 0;
    right: 0;
    overflow: hidden;
    width: 100%;
    height: 100%;
  `;
  scrollLocker.isLocked = true;
}


 () {
   (!scrollLocker.) ;
   body = .;
  body.. = scrollLocker.;
  
  
  .({
    : scrollLocker.,
    : 
  });
  scrollLocker. = ;
}


  {
  () {
    . = ;
    . = ;
  }
  () {
     (.) ;
    . = modalElement;
    modalElement..();
    ();
    . = ;
    . =  {
       (e. === ) .();
    };
    .(, .);
  }
  () {
     (!.) ;
    ();
    ...();
    . = ;
    .(, .);
  }
}