移动端弹出层加遮罩后禁止滑动

Posted 言文

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了移动端弹出层加遮罩后禁止滑动相关的知识,希望对你有一定的参考价值。

//实现滚动条无法滚动
var mo=function(e){e.preventDefault();};

/***禁止滑动***/
function stop(){
        document.body.style.overflow=‘hidden‘;        
        document.addEventListener("touchmove",mo,false);//禁止页面滑动
}

/***取消滑动限制***/
function move(){
        document.body.style.overflow=‘‘;//出现滚动条
        document.removeEventListener("touchmove",mo,false);        
}

原理就是利用 overflow:hidden;  

 

以上是关于移动端弹出层加遮罩后禁止滑动的主要内容,如果未能解决你的问题,请参考以下文章

移动端遮罩层滚动时,禁止底部滑动

移动端在有弹出层时如何禁止底层的滚动

解决移动端弹窗滚动事件触发主页面滚动事件

移动端在有弹出层时如何禁止底层的滚动 (实现表层滑动的时候,底层禁止滑动,表层隐藏的时候,底层依然可以滑动);

移动端弹出层滚动卡顿解决方案

移动端弹出层平滑滚动和fix定位的冲突