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

Posted 2020-11-19

禁止页面滑动

通常静止滑动方案：（阻止滑动事件）

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"
    });
});