js开启和禁止页面滑动

在移动端中,由于机型的不同,往往在弹窗的时候会出现页面的穿透事件,使得原页面还是能够进行滑动,这是我们不想看到的效果。

首先,建立一个函数

function bodyScroll(event){ 

    event.preventDefault(); 

}


之后在触发弹窗的时候禁止页面滚动

document.body.addEventListener('touchmove',bodyScroll,false); 

$('body').css({'position':'fixed',"width":"100%"});


关闭弹框时开启页面滚动

document.body.removeEventListener('touchmove',bodyScroll,false); 

$("body").css({"position":"initial","height":"auto"});                               


注意:切不可以下写法

document.body.addEventListener('touchmove', function (event) { 

    event.preventDefault(); 

},false); 

document.body.removeEventListener('touchmove', function (event) { 

    event.preventDefault(); 

},false);

---------------------

原文:https://blog.csdn.net/m0_37852904/article/details/79300719



也可以用下面情况: 1.遮罩层显示时处理 body{overflow:hidden;},一定要在关闭遮罩层时处理掉 body{overflow: initial;} 2.fastclick 库

let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop; 可对滑动高度进行处理

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容