继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

【移动端】js禁止页面滑动与允许滑动

呼唤远方
关注TA
已关注
手记 215
粉丝 81
获赞 367

禁止页面滑动

通常静止滑动方案:(阻止滑动事件)

window.ontouchmove=function(e){
    e.preventDefault && e.preventDefault();
    e.returnValue=false;
    e.stopPropagation && e.stopPropagation();    return false;
};

有部分机型不支持以上静止滑动方案,可使用:(点击后页面浮动到指定位置不动 将body的position设置为fixed)

$("#btn").click(function(){    var top=$(window).scrollTop();//这是当前滚动的页面滚动条位置
    $("body").css({        "position":"fixed",        "width":"100%",        "top":top*-1 //此处为当前需要定住的位置    });
});

允许页面滑动:

通常允许滑动方案:(清空滑动事件即可)

window.ontouchmove="";

处理部分机型禁止滑动的允许滑动:(将body的position设置为static)

$("#btn2").click(function(){
    $("body").css({        "position":"static"
    });
});

原文出处

打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP