禁止頁面滾動的方法

Joanne. ?發表於2018-10-22

平時做的大部分禁止頁面滾動都是用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);     //恢復瀏覽器原來的滾動距離                       
    })                        
})複製程式碼

具體的程式碼以及解釋都在上面啦~


相關文章