在移動端的頁面開發過程中,經常會遇到點擊彈框禁止頁面滾動的情景,下面就來說下具體的做法。。。
第一步:構建一個函數
function bodyScroll(event){ event.preventDefault(); }
第二步:點擊禁止頁面滾動
$(".button").click(function(){ document.body.addEventListener('touchmove',bodyScroll,false); $('body').css({'position':'fixed',"width":"100%"}); });
第三步:點擊開啟頁面滾動
$(".shadow-closes").click(function(){ document.body.removeEventListener('touchmove',bodyScroll,false); $("body").css({"position":"initial","height":"auto"}); });
完整代碼:
$(".button").click(function(){ document.body.addEventListener('touchmove',bodyScroll,false); $('body').css({'position':'fixed',"width":"100%"}); }); $(".shadow-closes").click(function(){ document.body.removeEventListener('touchmove',bodyScroll,false); $("body").css({"position":"initial","height":"auto"}); }); function bodyScroll(event){ event.preventDefault(); }