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() 也不会生效。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • JS+CSS3制作炫酷的弹窗效果

    JS+CSS3制作炫酷的弹窗效果

    昨天在家看电视时,退出的时候发现了一个弹窗效果,整个背景模糊,觉得这样的效果好炫,要比纯色加透明度高大上好多,连续试了几个界面,最终确定效果由css实现的,于是今天一大早来到公司便赶紧搜索了一下,虽然兼容性奇差,但是一个css属性就可以搞定.瞬间感觉自己知道的真是太少了~~ 首先回忆一下弹窗的实现,一般我们分为两层,弹出窗口层(popus)和遮罩层(mask),通常情况下我习惯就这两元素全部设成fixed定位,具体和absolute区别一试便知.对于mask层自不用多少,我们如下给他设置属性,让

  • JS实现一次性弹窗的方法【刷新后不弹出】

    本文实例讲述了JS实现一次性弹窗的方法.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text

  • js实现数字滚动特效

    js实现数字滚动特效

    本文实例为大家分享了js实现数字滚动展示的具体代码,供大家参考,具体内容如下 效果图 html代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #t,#tt{ border: #ccc thin solid; width: 250px; heig

  • 简述JS浏览器的三种弹窗

    1.alert:使用alert弹框提示信息,最后都会被转化为字符串输出(因为调用了toString这个方法).比如alert(1+1)弹出的结果应该是字符串形式的"2". 2.Confirm:在alert基础上增加了让用户选择性的操作(提供两个按钮:确定和取消) 比如:var  delin = confirm('你确定要删除吗?'); 这一句,当用户点击确定按钮的时候,我们接受到的结果是true,点击的是取消按钮的时候,我们接受到的结果是false,此后我们可以根据不同的结果做不同的处

  • JS实现自定义弹窗功能

    众所周知,浏览器自带的原生弹窗很不美观,而且功能比较单一,绝大部分时候我们都会按照设计图自定义弹窗或者直接使用注入layer的弹窗等等.前段时间在 慕课网 上看到了一个自定义弹窗的实现,自己顺便就学习尝试写了下,下面是主要的实现代码并添加了比较详细的注释,分享出来供大家参考.(代码用了ES6部分写法如需兼容低版本浏览器请把相关代码转成es5写法,后面有时间更新为一个兼容性较好的es5版本) HTML部分:(没什么内容 放置一个按钮调用函数,js中调用实例即可供参考) <!DOCTYPE html

  • JS使用遮罩实现点击某区域以外时弹窗的弹出与关闭功能示例

    本文实例讲述了JS使用遮罩实现点击某区域以外时弹窗的弹出与关闭功能.分享给大家供大家参考,具体如下: HTML部分: <div id="div">点击除开div的区域可以弹出弹窗</div> <div id="cover"></div> <div id="box">点击除开div和弹窗的区域可以关闭弹窗</div> CSS部分: #div{ /*设置z-index属性必须设置

  • JS弹窗 JS弹出DIV并使整个页面背景变暗功能的实现代码

    1.首先写一个遮罩层div,然后再写一个弹窗的div <!-- 遮罩层 --> <div id="cover" style="background: #000; position: absolute; left: 0px; top: 0px; width: 100%; filter: alpha(opacity=30); opacity: 0.3; display: none; z-index: 2 "> </div> <!

  • JS图片无缝、平滑滚动代码

    非常平滑的JS图片滚动特效代码,无缝循环,速度可自定义,鼠标悬停时停止.它的特点是JS和图片地址分离,这样做你就经易的从数据库动态调用每张图片的地址,方便控制,因此它非常的应用. 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <ht

  • 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: fa

  • 弹出遮罩层后禁止滚动效果【实现代码】

    方法一: $('.shade').bind( "touchmove", function (e) { e.preventDefault(); }); 方法二: $("body,.main").height($(window).height()).css({ "overflow-y": "hidden" }); 以上这篇弹出遮罩层后禁止滚动效果[实现代码]就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我

  • Vue解决移动端弹窗滚动穿透问题

    Vue解决移动端弹窗滚动穿透问题

    一.问题描述 在移动端的H5页面中,我们经常会遇到 "点击按钮-->弹窗-->选择选项" 这样的场景.而在选项过多出现滚动条时,滚动滚动条至容器的底部或者顶部.再往上或往下拖动滚动条时,滚动动作会出现穿透,这时候底部的body也会一起滚动. 问题总结:内容在滚动到容器的顶部或者底部时,再向上或向下 强行滚动 ,则出现滚动穿透 二.解决方案思考 参考了网上一大堆的解决方法,大可分为三类方法.经过认真的思考和分析,个人的总结如下: 使用js去控制和改变css 1. 弹窗出现 1

  • jquery弹窗时禁止body滚动条滚动的例子

    当弹出一个jq提示窗口的时候,一般窗口右边还会有进度条的情况,禁止进度条方法 禁止浏览器滚动条滚动: $('body').css({ "overflow-x":"hidden", "overflow-y":"hidden" }); 关闭弹出的窗口的时候需要显示出来,让浏览器窗口可以继续滚动 还原滚动: $('body').css({ "overflow-x":"auto", "

  • 小程序显示弹窗时禁止下层的内容滚动实现方法

    小程序显示弹窗时禁止下层的内容滚动实现方法,具体如下 ①  第一种方式 利用position:fixed.  禁止页面滚动. 一. 页面结构html  <view class="indexPage {{proInfoWindow?'indexFixed':''}}"> -----------此处为整个页面的结构内容 <button catchTap="_proInfoWindowShow">点击显示弹窗</button> <

  • JavaScript实现PC端横向轮播图

    本文实例为大家分享了JavaScript实现PC端横向轮播图的具体代码,供大家参考,具体内容如下 步骤: 第一步:先实现右侧按钮点击图片动起来: 1.每次点击图片走的距离: 2.起始位置已知,计算定时器每走一小步的距离: 第二步:判断点击按钮一次图片移动的距离,停止定时器: 第三步:左边按钮逻辑和右侧按钮几乎一致: 1.因此封装函数move(flag),函数传参是Boolean则是左右按钮方向 第四步:无缝轮播:html结构修改,在当前结构分别加第一张图和最后一张图: 1.判断图片位置,设置相应

  • javascript判断移动端访问设备并解析对应CSS的方法

    本文实例讲述了javascript判断移动端访问设备并解析对应CSS的方法.分享给大家供大家参考.具体分析如下: javascript判断不同web访问环境,主要针对移动设备,提供相对应的解析方案(判断设备代码直接copy腾讯网的): 复制代码 代码如下: // 判断是否为移动端运行环境  if(/AppleWebKit.*Mobile/i.test(navigator.userAgent) || (/MIDP|SymbianOS|NOKIA|SAMSUNG|LG|NEC|TCL|Alcatel

  • vue2.0路由切换后页面滚动位置不变BUG的解决方法

    最近项目中遇到这样一个问题,vue切换路由,页面到顶端的滚动距离仍会保持不变. <a href="javascript:;" rel="external nofollow" class="btn btn01" @click="useRightNow">立即试用</a> <router-link class="db" to="/user">个人中心<

  • JavaScript实现PC端四格密码输入框功能

    本文实例为大家分享了JavaScript实现PC端四格密码输入框的具体代码,供大家参考,具体内容如下 html代码如下 比较简洁的一个demo <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>四个密码输入框</title> <script type="text/javascript" src="jquery.

  • javascript实现移动端 HTML5 图片上传预览和压缩功能示例

    本文实例讲述了javascript实现移动端 HTML5 图片上传预览和压缩功能.分享给大家供大家参考,具体如下: 在开发移动端web网页中,我们不可避免的会遇到文件上传的功能,但由于手机图片尺寸太大,上传时间过长导致用户体验太差,就需要在上传前对图片进行一定的压缩. 在代码之前,有必要先了解我们即将使用到的几个API file 和 FileList 对象 file对象可以用来获取某个文件的信息,还可以用来读取这个文件的内容.通常情况下,File对象是来自用户在一个 input 元素上选择文件后

随机推荐