js 禁止/允許頁面滾動

方法一：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);
},