禁止页面滚动的方法

平时做的大部分禁止页面滚动都是用preventDefault，附上代码

function handler() {  event.preventDefault();}

// 绑定事件document.addEventListener('touchmove', handler, false);// 解绑事件document.removeEventListener('touchmove', handler, false);复制代码

如上，addEventListener则添加禁止页面滚动事件；removeEventListener则恢复页面滚动。

但是有的时候，我们并不需要完全禁止全部页面，也会存在一种情况，那就是整体页面需要禁止滚动，但是弹窗内的内容仍需要滚动，此时，以上的方法就不适用了，给html加上overflow：hidden;height:100%；也是不适合的，因为这样页面会滚动到最顶部，那么此时就可以使用以下方法：

$("遮罩层出现按钮").click(function () {                            
    $("遮罩层").show();                            
    var scroll = $(window).scrollTop();                            
    $("html,body").css({                                
        "position":"fixed",                                
        "top":-scroll                            
    }); //相对于窗口定位弹窗，距离顶部的距离等于页面滚动的距离，这样就不会出现点击回到顶部的情况                           
    // 点击取消弹窗消失                            
    $("遮罩层消失按钮").click(function () {                                
        $("遮罩层").hide();                                
        $("html,body").css({                                    
            "position":"static",   //去除相对于窗口的定位                             
        });                                
        $(window).scrollTop(scroll);     //恢复浏览器原来的滚动距离                       
    })                        
})复制代码

具体的代码以及解释都在上面啦~