移动端vue项目解决遮罩层滚动穿透问题

网上有好几种方法，对于我来说，常用的就两种，

1、当弹框明显小于页面的时候，确保不需要滑动查看内容时，可在最外层的遮盖层添加  ：@touchmove.prevent

2、弹框的内容明显长过屏幕，需要弹框内容滑动，主页页面不滑动

（1）在html文件添加如下代码

<script type="text/javascript">
//解决遮罩层滚动穿透问题，分别在遮罩层弹出后和关闭前调用
const ModalHelper = ( (bodyCls) =>{
let scrollTop;
return {
afterOpen: function () {
scrollTop = document.scrollingElement.scrollTop;
document.body.classList.add(bodyCls);
document.body.style.top = -scrollTop + 'px';
},
beforeClose: function () {
document.body.classList.remove(bodyCls);
// scrollTop lost after set position:fixed, restore it back.
document.scrollingElement.scrollTop = scrollTop;
}
};
})('dialog-open');
</script>

（2）在全局的CSS中添加

body.dialog-open {
position: fixed;
width: 100%;
}

（3）在vue组件中，对话框弹出和关闭的地方调用上面那段JS代码

对话框弹出后调用：ModalHelper.afterOpen();

对话框关闭前调用：ModalHelper.beforeClose();

此方法的原理是：弹出弹框时，使背景主页内容作为固定定位，这样页面的滑动对其就没有任何影响，关闭弹框使，移除这个固定定位的类名，回复正常

最后

以上就是酷炫煎蛋为你收集整理的移动端vue项目解决遮罩层滚动穿透问题的全部内容，希望文章能够帮你解决移动端vue项目解决遮罩层滚动穿透问题所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。