H5弹窗弹出后，页面可滚动，希望禁止滚动

1.场景：当我们进行移动端开发时候，页面肯定大概率不是一屏展示，这时候就会有滚动效果，这时当我们点击某个按钮出现弹窗后，你会发现你在弹窗上上下滚动时，会导致蒙层下页面跟着滚动，虽然功能上没啥问题但是感官不好。

2.解决

方法1:

1.给html标签添加overflow:hidden属性（缺点：先滚动页面，后弹出弹窗，页面会回到顶部）

let body=document.getElementsByTagName('html');
if(modelIsShow){
  body.style.overflow='hidden';
}else{
  body.style.overflow='';
}

2.禁止touchmove的默认事件（弊端：滚动事件失效）

document.addEventListener('touchmove',function(e){
  if(modelIsShow){
    e.preventDefault();
  }
},{passive: false})

3.改变body样式（实测可行）

/**
 * 阻止背景滚动
 *
 * @param  Boolean  flag    [是否阻止背景滚动]
 */
const preventBack = (flag) => {
    if (flag) {
        const top = document.documentElement.scrollTop || document.body.scrollTop;
        document.body.style.cssText += `
            position: fixed;
            width: 100vw;
            left: 0;
            top: ${-top}px;
        `;
    } else {
        const top = document.body.style.top;
        document.body.style.cssText += `
            position: static;
        `;
        window.scrollTo(0, Math.abs(parseFloat(top)));
    }
};