JavaScript实现移动端弹窗后禁止滚动的方法
这篇文章主要讲解了JavaScript实现移动端弹窗后禁止滚动的方法,内容清晰明了,对此有兴趣的小伙伴可以学习一下,相信大家阅读完之后会有帮助。
石首ssl适用于网站、小程序/APP、API接口等需要进行数据传输应用场景,ssl证书未来市场广阔!成为创新互联的ssl证书销售渠道,可以享受市场价格4-6折优惠!如果有意向欢迎电话联系或者加微信:18980820575(备注:SSL证书合作)期待与您的合作!
代码如下
computed:{ popupStatus(){ return this.SendCircle_visible || this.generateInfo_visible || this.isPosterShow; } }, methods:{ stopTouch(e){ e.preventDefault(); }, }, watch: { popupStatus(val) { let preD = this.stopTouch; let options = { passive: false, //强调默认事件 capture: true, //早点禁止该事件 }; if (val) { document.body.style.overflow = 'hidden'; document.addEventListener('touchmove', preD, options); // 禁止页面滑动 } else { document.body.style.overflow = ''; // 出现滚动条 document.removeEventListener('touchmove', preD, options); } } }
配置说明
addEventListener目前第三个参数可以为布尔值或对象
addEventListener(type, listener[, useCapture ])
addEventListener(type, listener[, options ])
为对象时默认配置如下
capture: false
passive: false
once: false
其中 capture 属性等价于以前的 useCapture 参数;once 属性就是表明该监听器是一次性的,执行一次后就被自动 removeEventListener 掉。
passive是因为浏览器无法预先知道一个监听器会不会调用 preventDefault(),只有等监听器执行完后再去执行默认行为,因此就会导致页面卡顿。而一旦passive为true,浏览器就可以直接执行默认行为而不等待。此时即使调用了 preventDefault() 也不会生效。
看完上述内容,是不是对JavaScript实现移动端弹窗后禁止滚动的方法有进一步的了解,如果还想学习更多内容,欢迎关注创新互联行业资讯频道。
网页标题:JavaScript实现移动端弹窗后禁止滚动的方法
网站URL:http://myzitong.com/article/ggchhi.html