禁止頁面滾動的方法

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);     //恢復瀏覽器原來的滾動距離                       
    })                        
})複製程式碼

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


相關文章