JavaScript实现移动端弹窗后禁止滚动
更新时间：2020年05月25日 11:58:13 作者：千年轮回
这篇文章主要介绍了JavaScript实现移动端弹窗后禁止滚动,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
代码如下
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() 也不会生效。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
相信大家都知道图表是数据图形化的表示，通过形象的图表来展示数据，比如条形图，折线图，饼图等。可视化图表可以帮助开发者更容易理解复杂的数据，提高生产的效率和Web应用和项目的可靠性。现在就让我们大家一起来学习用D3.js来实现饼图的方法，有需要的可以参考借鉴。2016-09-09
这篇文章主要为大家详细介绍了原生JS实现分页点击控件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-08-08
这篇文章主要为大家详细介绍了javascript实现点击按钮变色，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-07-07
这篇文章主要介绍了Nuxt v-bind绑定img src不显示的解决，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-12-12
使用BootStrap建立响应式网页——通栏轮播图（carousel）
这篇文章主要介绍了使用BootStrap建立响应式网页通栏轮播图（carousel）的相关资料,需要的朋友可以参考下2016-12-12
深入理解JS中Number()，parseInt()，parseFloat()三者比较
这篇文章主要介绍了JS中Number()，parseInt()，parseFloat()三者比较,需要的朋友可以参考下2018-08-08
这篇文章介绍了JavaScript的防抖和节流案例的代码实现和概念.包含详细的代码,希望对你有所帮助2021-06-06
端午节马上就到了，听说你们公司没发粽子大礼包？没关系，这里用 JS实现了一个简单的接粽子小游戏，能接到多少粽子，完全看你手速，快跟随小编一起来学习学习吧2022-05-05
今天小编就为大家分享一篇layui的表单提交以及验证和修改弹框的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-09-09
这篇文章主要为大家详细介绍了原生JS实现图片轮播切换效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-12-12
最新评论