打开弹蒙层禁止下方页面滚动

---

 

弹窗是一种常见的交互方式，而蒙层是弹窗必不可少的元素，用于隔断页面与弹窗区块，暂时阻断页面的交互。但是在蒙层出现的时候滚动页面，如果不加处理，蒙层底部的页面会开始滚动，实际上我们是不希望他进行滚动的，因此需要阻止这种行为。当弹出蒙层时禁止蒙层下的页面滚动，也可以称为滚动穿透的问题。

 

以下是JQ的解决方案：

 

let pageScrollTop

// 当打开蒙层时
function openMask  () {
  // 你的执行代码
  ...

  pageScrollTop = document.documentElement.scrollTop
  $('body').css({
    'width': '100%',
    'position': 'fixed',
    'top': -pageScrollTop,
    'overflow-y': 'scroll'
  })
  $('html').css({
    'scroll-behavior': 'auto'
  })
}

// 当关闭蒙层时
function closeMask () {
  // 你的执行代码
  ...

  $('body').css({
    'top': '',
    'position': '',
    'width': '',
    'overflow': ''
  })
  window.scrollTo({
    top: pageScrollTop,
  })
  $('html').css({
    'scroll-behavior': '',
  })
}