vue禁止局部滾動/禁止局部滑動事件(其他模塊化開發框架react/angular禁止局部滑動同理)

剛開始為了實現：篩選菜單彈出來：禁止頁面滑動，菜單收回去：允許頁面滑動，真是煞費苦心啊，以前在jquery/bootstrap上面用的老辦法都物是人非，哎…… 那些因為年輕犯的錯：

1. 錯誤示範(可以跳過)（document污染全局）

       stopScroll:function(maskShow){// scrollType為蒙版顯隱判斷
           let bodyWidth = document.body.offsetWidth;
           let taskTopOffsetTop = document.getElementById("taskTop").getBoundingClientRect().top*(375/bodyWidth);//loadMore距離頂部的距離
           let pageGridOffsetTop = document.getElementById("pageGrid").getBoundingClientRect().top*(375/bodyWidth);//loadMore距離頂部的距離
           console.log("taskTopOffsetTop",taskTopOffsetTop);
   
           if(maskShow){
               this.scrollTop = document.body.scrollTop*(375/bodyWidth);
               console.log("scrollTop",scrollType,this.scrollTop);
               //讓頁面元素位置保持不動
               document.getElementById("taskTop").style.position = "fixed";
               document.getElementById("taskTop").style.top = taskTopOffsetTop+"px";
               document.getElementById("pageGrid").style.position = "fixed";
               document.getElementById("pageGrid").style.top = pageGridOffsetTop+"px";
   
               $("html,body").addClass("scrollYHide");//禁止PC滾動
           }else{
               $("html,body").removeClass("scrollYHide");//解放PC滾動
              //恢復頁面元素位置
               if(!this.$parent.isFixed){
                   document.getElementById("taskTop").style.position = "relative";
                   document.getElementById("taskTop").style.top = "auto";
                   document.getElementById("pageGrid").style.position = "relative";
                   document.getElementById("pageGrid").style.top = "auto";
   
                   console.log("scrollTop",scrollType,this.scrollTop);
                   document.body.scrollTop = this.scrollTop;
                   console.log("body",document.body.scrollTop);
               }
           }
   

2. 錯誤示範(可以跳過)（document污染全局）

   mounted:function(){
       let onScroll = document.addEventListener("touchmove",function(event){
           if(maskShow){//maskShow為蒙版的顯隱狀態
               event.preventDefault();
           }
       },false);// 監聽滾動
   }
   

3. 正確的姿勢來了（很簡單一看就會）

   //移動端禁止局部滾動
   <div class="mask" @touchmove.prevent></div>
   //PC端禁止局部滾動
   <div class="mask" @scroll.prevent></div>
   

   　　

   直接給蒙版層@touchmove.prevent，然後去控制蒙版的顯隱。沒錯就是這麼簡單，第一大點和第二大點看起來還有些上腦，其實並沒有什麼卵用，可以直接跳過，不用看。你的出現，只是為了襯托第三點的精簡確切。

作 者：呂江民

Email：[email protected]

出處：http://www.cnblogs.com/lvjiangmin/

本文版權歸作者所有，歡迎轉載、交流，但未經作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文鏈接。如果覺得本文對您有益，歡迎點贊、歡迎探討。