移动端遮盖层底层滑动问题

移动端遮盖层底部滑动问题

背景：公司公众号需要一个给用户预约服务的页面。
出现场景：用户在预约之前需要勾选一个用户个人信息的保密协议。页面上使用弹窗弹出，并且展示个人协议。发现在出现这个协议的时候，页面底层会随着拖动而滚动。

分析：弹窗的渲染，先给页面添加一个 fixed 定位的黑色透明背景。再在内部添加一个白色的可阅读区域，并且可以滑动。

解决方案
尝试1：在阅读框出现的时候给body 添加了 overflow：hidden 属性。发现在 Chrome 模拟手机的时候可以组织滚动，但是在微信打开的时候失败了。
尝试2：给节点添加 e.preventDefault() 阻止时间触发。这个在页面的弹出框高度确定，并且内部不存在滑动时，可以生效。但是我们业务中的这个 页面有一个服务条款是通过弹框的方式给用户展示。这时弹框内部存在滚动，在微信上查看时，弹框内部滑动时，底层的滑动事件还是会被触发。
尝试3：在弹窗出现时记录下 scrollTop，同时给 body 一个 position:fixed。这样视觉上，页面没有滚动，并且不需要添加其他的方法。

最终决定使用第三种方法，先贴代码

// 固定body 
function freezeBody(){
 let scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
    document.body.style.cssText += 'position:fixed;top:-' + scrollTop + 'px;';
}

//解除固定
function thawBody() {
	let body = document.body;
    body.style.position = '';
    let top = body.style.top;
    document.body.scrollTop = document.documentElement.scrollTop = -parseInt(top);
    body.style.top = '';
}

具体使用，在出现弹窗的函数中直接调用 freezeBody 方法。在弹窗消失的时候 调用 thawBody 方法。这样H5 就可以解决，H5 中弹窗出现时，底层还能滑动问题。