H5 实现 弹出弹层的同时阻止页面滚动

通常自己写弹窗的时候,希望弹出弹窗后,弹窗下面的内容可以阻止滚动,优化体验效果;下面的代码可以实现

let y;
class lock{
  static afterOpen() {
  //  弹出弹窗,设置body 的 position 为 fixed, 阻止body的滚动
    Y = document.scrollingElement.scrollTop;
    document.body.style.position = 'fixed';
    document.body.style.top = `${-Y}px`;
    // 为了防止用户不关闭弹窗就退出当前页面出现影响其他页面滚动的情况,
    // 可是监听  popstate   ,页面返回的时候触发
    window.addEventListener('popstate', change(), false);
  }

  static beforeClose() {
  // 关闭弹窗,恢复页面的滚动
    document.body.style.position = '';
    document.body.style.top = '';
    document.scrollingElement.scrollTop = Y;
    // 同时移除监听 popstate  事件
    window.removeEventListener('popstate',change(), false);
  }
}
function change(){
  document.body.style.position = '';
  document.body.style.top = '';
}
export default lock;

//   lock  的使用
// 在需要使用lock 的页面中引入
import lock from './lock';

// 弹窗弹出的逻辑代码中添加
lock.afterOpen();

//关闭弹窗的逻辑代码中添加
lock.beforeClose();