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