出處:http://www.fly63.com/article/detial/5595
方法一:IOS允許滾動會無效
function scrControl(t){
if(t == 0){ //禁止滾動
document.body.addEventListener('touchmove', function (e) {
e.preventDefault();
}, { passive: false }); //passive 參數不能省略,用來兼容ios和android
}else if( t == 1){ //允許滾動
document.body.addEventListener('touchmove', function (e) {
e.returnValue = true;
}, {passive: false});
}
}
passive,設置該屬性的目的主要是為了在阻止事件默認行為導致的卡頓。等待監聽器的執行是耗時的,有些甚至耗時很明顯,這樣就會導致頁面卡頓。即便監聽器是個空函數,也會產生一定的卡頓,畢竟空函數的執行也會耗時。加上{ passive: false }能防止頁面卡頓。
可以通過傳遞 passive 為 true 來明確告訴瀏覽器,事件處理程序不會調用 preventDefault 來阻止默認滑動行為。
如果設置了passive為true,同時又阻止默認行為,阻止是不生效的。
document.addEventListener("touchmove", function(event) {
event.preventDefault() //不產生作用
}, {passive: true});
方法二:兼容IOS
function bodyScroll(event){
event.preventDefault();
}
function scrControl(t){
if(t == 0){ //禁止滾動
document.body.addEventListener('touchmove', this.bodyScroll, { passive: false });
}else if( t == 1){ //開啟滾動
document.body.removeEventListener('touchmove',this.bodyScroll, {passive: false});
}
}
方法三:
//禁止頁面滑動
stop(){
var mo=function(e){passive: false ;};
document.body.style.overflow='hidden';
document.addEventListener("touchmove",mo,false);//禁止頁面滑動
},
//取消滾動限制
move(){
var mo=function(e){passive: false };
document.body.style.overflow='';//出現滾動條
document.removeEventListener("touchmove",mo,false);
},