禁止页面滚动的方法

13,343 阅读1分钟

平时做的大部分禁止页面滚动都是用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);     //恢复浏览器原来的滚动距离                       
    })                        
})

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