在移动端的页面开发过程中,经常会遇到点击弹框禁止页面滚动的情景,下面就来说下具体的做法。。。
第一步:构建一个函数
function bodyScroll(event){
event.preventDefault();
}
第二步:点击禁止页面滚动
$(".button").click(function(){
document.body.addEventListener('touchmove',bodyScroll,false);
$('body').css({'position':'fixed',"width":"100%"});
});
第三步:点击开启页面滚动
$(".shadow-closes").click(function(){
document.body.removeEventListener('touchmove',bodyScroll,false);
$("body").css({"position":"initial","height":"auto"});
});
完整代码:
$(".button").click(function(){
document.body.addEventListener('touchmove',bodyScroll,false);
$('body').css({'position':'fixed',"width":"100%"});
});
$(".shadow-closes").click(function(){
document.body.removeEventListener('touchmove',bodyScroll,false);
$("body").css({"position":"initial","height":"auto"});
});
function bodyScroll(event){
event.preventDefault();
}