在PC端的实现方法1.弹窗显示时,给body元素添加一个属性:overflow:hidden,去掉这个弹窗关闭时的属性2.在弹窗的div上设置@scroll.stop.prevent
你要显示的内容
3.当弹窗出现,在body元素上加上position:fixed,这样主页面就禁止滑动了,同时也很好的解决了弹窗穿透的问题。如果弹窗是一个独立的组件,可以使用如下代码:beforeMount(){//获取原来的scrollTop,将body的top改为对应的值this.prevBodyStyle_scrollTop=document.body.scrollTop||document.documentElement.scrollTop这个。prevBodyStyle_top=window.getComputedStyle(document.body,null).getPropertyValue('top')document.body.style.top=`-${this.prevBodyStyle_scrollTop}px`//获取原body的位置以便求解iOS上的光标漂移问题是修改position为fixedthis.prevBodyStyle_position=window.getComputedStyle(document.body,null).getPropertyValue('position')document.body.style.position='fixed'//顺序避免出现widthnullvaluethis的情况。prevBodyStyle_width=window.getComputedStyle(document.body,null).getPropertyValue('width')document.body.style.width='100%'},beforeDestroy(){document.body.style.top=this.prevBodyStyle_top||'0px'document.body.style.position=this.prevBodyStyle_positiondocument.body.style.width=this.prevBodyStyle_width||'100%'document.body.scrollTop=document.documentElement.scrollTop=this.prevBodyStyle_scrollTop||0},备注:如果弹窗是一个独立的组件,那么需要用v-if来控制弹窗是否显示,不能用v-show(因为用了v-show,它会在主页面刚刚生成时生成组件,导致position=fixed生效,关闭弹窗时页面也禁止滑动)移动端如何实现1.添加@touchmove.stop.prevent到弹窗最外层的div(适用于弹窗内容不需要滚动的情况)有问题thecontentyouwanttodisplay
:虽然可以防止滑动,但是双击时主页面还是会跳转2.同时PC端的第三种方法3.使用addEventListener解决mounted(){document.body.addEventListener('touchmove',this.p,{passive:false})},beforeDestroy(){document.body.removeEventListener('touchmove',this.p)},方法:{p(e){e.preventDefault()e.stopPropagation()}}亮点:addEventListener的第三个参数{passive:false}先说错误代码,网上都一样怎么都成功了?我在想。反正我没成功。我仍然可以在手机和chrome浏览器上正常滚动:document.body.addEventListener("touchstart",function(e){e.stopPropagation();e.preventDefault();},false);为什么错误代码不起作用,为什么在使用{passive:false}时生效?摘自MDN的解释:passive:Boolean,表示监听器永远不会被调用preventDefault()如果侦听器仍然调用此函数,客户端将忽略它并抛出控制台警告。MDN明确解释了上述错误现象:根据规范,passive选项的默认值始终为false。但是,这引入了处理某些触摸事件(以及其他事件)的事件侦听器可能会在尝试处理滚动时阻塞浏览器的主线程,从而导致滚动处理期间的性能可能显着降低。为了防止这个问题,一些浏览器(特别是Chrome和Firefox)已经将文档级节点Window、Document和Document.body的touchstart和touchmove事件的passive选项的默认值更改为true。这可以防止调用事件侦听器,因此无法阻止在用户滚动时呈现页面。varelem=document.getElementById('elem');elem.addEventListener('touchmove',functionlistener(){/*做某事*/},{passive:true});添加passive:true参数后,touchmove事件不会阻塞页面的滚动(也适用于鼠标滚轮事件)。因此,我们可以通过将passive的值显式设置为false来覆盖此行为。另外:您不必担心基本滚动事件的被动值。事件侦听器无法阻止页面呈现,因为它们无法取消。(也是PC端滚动监控无效的原因)参考链接前两种方法:https://blog.csdn.net/Chelle1...第三种方法:https://blog.csdn.net/yuhk231...vue防止方法:https://www.cnblogs.com/Eden-...mdn关于addEventListener:https://developer.mozilla.org...