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：192389590@qq.com

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

本文版权归作者所有，欢迎转载、交流，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文链接。如果觉得本文对您有益，欢迎点赞、欢迎探讨。

转载于:https://www.cnblogs.com/lvjiangmin/p/7276948.html