H5 移动端滚动穿透

一般 H5 常见的活动页，如果当前页面超过一屏，同时在当前页面显示弹窗，整个页面依旧可以滚动

1.功能

常见的活动页问题，显示弹窗时，应当禁止滚动，锁住当前滚动高度

2.实现

2.1方案

显示弹窗时，记录滚动高度，body 标签 fixed，
隐藏弹窗时，body.scrollTop = 滚动高度，body 标签取消 fixed

2.2 代码实现（vuex）

// 全局样式
.model-open {
    position: fixed;
    width: 100%;
}

// store/index.js
// 打开 model
openModel(state, scrollTop) {
    state.scrollTop = scrollTop;
    document.body.classList.add('model-open');
    document.body.style.top = -state.scrollTop + 'px';
},
// 关闭 model
closeModel(state) {
    document.body.classList.remove('model-open');
    document.body.scrollTop = state.scrollTop;
}

2.3 特殊情况处理

（1）弹窗内容在弹窗容器内一屏展示的下
直接调用 openModel，closeModel

（2）弹窗内容在弹窗容器内一屏展示不下
在容器内部使用 better-scroll

参考文献，关于移动端的滚动穿透，别再跟风复制代码了

参考文献，html5 移动端滚动穿透 几种方案

参考文献，移动端滚动穿透问题完美解决方案