Html5弹窗遮罩层静止页面滚动方法

最近自己在做移动端Html5部分功能页面的时候需要弹窗遮罩层，要求弹窗遮罩后页面不能滑动滚动，主要是利用移动端的　touchmove事件， 希望对你有帮助，做个记录实现方式如下： `touchmove事件：触摸移动事件，当手指在屏幕上滑动的时候连续地触发。在这个事件发生期间，调用preventDefault()事件可以阻止滚动，需要addEventListener手动注册。` //禁止滑动事件 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); }

• 作者: xiazhicong
• 时间: 2018-05-14
• 分类: 前端技术
• 1 条评论