vue禁止局部滚动/禁止局部滑动事件(其他模块化开发框架react/angular禁止局部滑动同理)
刚开始为了实现:筛选菜单弹出来:禁止页面滑动,菜单收回去:允许页面滑动,真是煞费苦心啊,以前在jquery/bootstrap上面用的老办法都物是人非,哎…… 那些因为年轻犯的错:
- 错误示范(可以跳过)(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); } }
- 错误示范(可以跳过)(document污染全局)
mounted:function(){ let onScroll = document.addEventListener("touchmove",function(event){ if(maskShow){//maskShow为蒙版的显隐状态 event.preventDefault(); } },false);// 监听滚动 }
- 正确的姿势来了(很简单一看就会)
//移动端禁止局部滚动 <div class="mask" @touchmove.prevent></div> //PC端禁止局部滚动 <div class="mask" @scroll.prevent></div>
作 者:吕江民
Email:192389590@qq.com
出处:http://www.cnblogs.com/lvjiangmin/
本文版权归作者所有,欢迎转载、交流,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文链接。如果觉得本文对您有益,欢迎点赞、欢迎探讨。
作 者:吕江民
Email:192389590@qq.com
出处:http://www.cnblogs.com/lvjiangmin/
本文版权归作者和博客园共有,欢迎转载、交流,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文链接。如果觉得本文对您有益,欢迎点赞、欢迎探讨。