摘要：端如何实现当弹窗显示时，为元素添加属性当关闭弹窗时移除该属性即可在弹窗的上设置你要显示的内容出现弹窗时，为元素添加，这样主页面就禁止滑动，同时很好地解决了弹窗穿透的问题。由于无法取消，因此事件监听器无法阻止页面呈现。
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
this.prevBodyStyle_top = window.getComputedStyle(document.body, null).getPropertyValue("top")
document.body.style.top = `-${this.prevBodyStyle_scrollTop}px`
// 获取原来body的position 为了解决iOS上光标漂移的问题 将position修改为fixed
this.prevBodyStyle_position = window.getComputedStyle(document.body, null).getPropertyValue("position")
document.body.style.position = "fixed"
// 为了避免width空值的情况
this.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_position
document.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.在弹窗的最外层div上添加@touchmove.stop.prevent (适合弹窗内容不需要滚动的情况下)
你要显示的内容
存在问题： 虽然可以阻止滑动，但是双击的时候主页面还是会跳动
2.同PC端第三种方法
3.通过addEventListener解决
mounted() {
document.body.addEventListener("touchmove", this.p, {passive: false})
},
beforeDestroy () {
document.body.removeEventListener("touchmove", this.p)
},
methods: {
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，表示 listener 永远不会调用preventDefault()。如果 listener 仍然调用了这个函数，客户端将会忽略它并抛出一个控制台警告。
MDN对于上述错误现象解释地很清楚：
根据规范，passive 选项的默认值始终为false。但是，这引入了处理某些触摸事件（以及其他）的事件监听器在尝试处理滚动时阻止浏览器的主线程的可能性，从而导致滚动处理期间性能可能大大降低。
为防止出现此问题，某些浏览器（特别是Chrome和Firefox）已将touchstart和touchmove事件的passive选项的默认值更改为true文档级节点 Window，Document和Document.body。这可以防止调用事件监听器，因此在用户滚动时无法阻止页面呈现。
var elem = document.getElementById("elem");
elem.addEventListener("touchmove", function listener() { /* do something */ }, { passive: true });
添加passive:true参数后，touchmove事件不会阻塞页面的滚动（同样适用于鼠标的滚轮事件）。参考链接所以，我们可以通过将passive的值显式设置为false来覆盖此行为。
另外：您无需担心基本scroll 事件的passive值。由于无法取消，因此事件监听器无法阻止页面呈现。（也是在PC端监听scroll无效的原因）
前两种方法：https://blog.csdn.net/Chelle1...
第三种：https://blog.csdn.net/yuhk231...
vue prevent方法: https://www.cnblogs.com/Eden-...
mdn关于addEventListener: https://developer.mozilla.org...
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/99623.html
摘要：端如何实现当弹窗显示时，为元素添加属性当关闭弹窗时移除该属性即可在弹窗的上设置你要显示的内容出现弹窗时，为元素添加，这样主页面就禁止滑动，同时很好地解决了弹窗穿透的问题。由于无法取消，因此事件监听器无法阻止页面呈现。 pc端如何实现 1.当弹窗显示时，为body元素添加属性：overflow：hidden, 当关闭弹窗时移除该属性即可2.在弹窗的div上设置 @scroll.sto...
摘要：但是，在蒙层元素中滑动的时候，滑到内容的尽头时，再继续滑动，蒙层底部的页面会开始滚动，显然这不是我们想要的效果，因此需要阻止这种行为。部分安卓机型以及中，无法无法阻止底部页面滚动。为蒙层容器节点简单粗暴，滚动时底部页面也无法动弹了。 场景概述 弹窗是一种常见的交互方式，而蒙层是弹窗必不可少的元素，用于隔断页面与弹窗区块，暂时阻断页面的交互。但是，在蒙层元素中滑动的时候，滑到内容的尽头时...
摘要：但是，在蒙层元素中滑动的时候，滑到内容的尽头时，再继续滑动，蒙层底部的页面会开始滚动，显然这不是我们想要的效果，因此需要阻止这种行为。部分安卓机型以及中，无法无法阻止底部页面滚动。为蒙层容器节点简单粗暴，滚动时底部页面也无法动弹了。 场景概述 弹窗是一种常见的交互方式，而蒙层是弹窗必不可少的元素，用于隔断页面与弹窗区块，暂时阻断页面的交互。但是，在蒙层元素中滑动的时候，滑到内容的尽头时...
摘要：但是，在蒙层元素中滑动的时候，滑到内容的尽头时，再继续滑动，蒙层底部的页面会开始滚动，显然这不是我们想要的效果，因此需要阻止这种行为。部分安卓机型以及中，无法无法阻止底部页面滚动。为蒙层容器节点简单粗暴，滚动时底部页面也无法动弹了。 场景概述 弹窗是一种常见的交互方式，而蒙层是弹窗必不可少的元素，用于隔断页面与弹窗区块，暂时阻断页面的交互。但是，在蒙层元素中滑动的时候，滑到内容的尽头时...
阅读 636·2023-04-25 18:59
阅读 1188·2021-09-22 16:00
阅读 1847·2021-09-22 15:42
阅读 3576·2021-09-22 15:27
阅读 1230·2019-08-30 15:54
阅读 1068·2019-08-30 11:16
阅读 2421·2019-08-29 16:24
阅读 784·2019-08-29 12:14
