在页面上显示一个遮罩层,这是非常常见的操作,在遮罩层上操作,下层也会默认跟随手指滚动

此处就是要在显示遮罩的时候禁止下层滚动。

首先设置一个全局变量

var canScroll=false;

页面初始化的时候添加事件监听

document.addEventListener('touchmove',function(e){
            if(!canScroll){
                e.preventDefault()
            }
        })

下面只要设置canScroll这个变量就可以控制页面是否跟随手指滚动了

H5页面遮罩弹框下层还能滚动的问题的更多相关文章

  1. js+css jQuery实现页面后退执行 & 遮罩弹框

    JS部分 <script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script> < ...

  2. iOS bug 之 H5 页面没有弹出提示框

    描述:在安卓上有提示框,但是在iOS上没有提示框. step 1: 失误,是我没有在正确的位置设置网址. step 2: 修改之后,测试页能弹出提示框,但是正式的页面没有提示框. step 3: 我输 ...

  3. ionic2.1.0 --beta3版本新建页面做弹框时遇到的问题

    新建的页面需要在app.module.ts文件中定义.不然制作页面弹出效果是会报错.

  4. css+JS实现遮罩弹框

    <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta nam ...

  5. div遮罩弹框口

    <html> <head> <meta http-equiv="Content-Type" content="text/html; char ...

  6. js页面的弹框怎么关闭啊

    1.单纯的关闭window.opener.location.reload(); //刷新父窗口中的网页window.close();//关闭当前窗窗口2.提交后关闭 function save(){d ...

  7. 利用layer实现MVC页面数据互交提示弹框

    需求说明: 一个表单页面,点击提交之后,进入后台进行一系列数据交互,然后将交互信息返回至页面中,并以弹框形式展示 应用场景: 添加.修改.删除数据后,返回数据操作是否成功,以及一些其他信息 前期准备: ...

  8. 移动端ios升级到11及以上时,手机弹框输入光标出现错位问题

    引起原因:弹框的定位采取position:fixed,而ios(safari)对定位属性position:fixed的解析不一致导致. 解决方案: 方案一 一开始上网找解决方案,找到如下处理方式.但存 ...

  9. 阻止微信浏览器/QQ浏览器长按弹框“在浏览器打开”

    这个弹框实际上等同于PC环境下的鼠标右键的弹框,因此只要禁止页面的弹框事件就能完美屏蔽该弹框对我们功能带来的影响.程序代码如下: document.oncontextmenu=function(e){ ...

随机推荐

  1. 自定义 vue switch 组件

    <template> <div class="switch clearfix" @click="toggle" v-bind:style=&q ...

  2. 服务治理-> Spring Cloud Eureka

    服务治理->搭建服务注册中心 服务治理可以说是微服务架构中最为核心和基础的模块, 它主要用来实现各个微服务 实例的自动化注册与发现. 为什么我们在微服务架构中那么需要服务治理模块呢?微服务 系统 ...

  3. Codeforces1151E,F | 553Div2 | 瞎讲报告

    传送链接 E. Number of Components 当时思博了..一直在想对于\([1,r]\)的联通块和\([1,l-1]\)的联通块推到\([l,r]\)的联通块...我真的是傻了..这题明 ...

  4. [SimHash] the Hash-based Similarity Detection Algorithm

    The current information explosion has resulted in an increasing number of applications that need to ...

  5. wc命令详解

    基础命令学习目录首页 原文链接:http://www.cnblogs.com/peida/archive/2012/12/18/2822758.html Linux系统中的wc(Word Count) ...

  6. 【quickhybrid】如何实现一个Hybrid框架

    章节目录 [quickhybrid]如何实现一个跨平台Hybrid框架 [quick hybrid]架构一个Hybrid框架 [quick hybrid]H5和Native交互原理 [quick hy ...

  7. youi软件测试计划

    beta版本中,我们将重视软件开发中的测试. 我们的软件是需要测试的,不测试怎么知道好与不好呢?有的程序不测试甚至都不能运行-- 我们的目标呢:就是经过测试之后软件的质量得到有效的保证.不管什么情况都 ...

  8. CS小分队第二阶段冲刺站立会议(6月2日)

    昨日成果:攻克了按钮移动的问题: 遇到问题:一开始按钮移动时候,非常慢,因为是根绝相对位移差来移动,延时很严重,后来改用用鼠标的位置作为按钮的移动位置,效果明显. 按钮的mousedown事件和mou ...

  9. 第一阶段Spring个人总结

    通过这一阶段的冲刺,我感到的是名义上的团队,而实际上却是一个人的事,每个人跟每个人都不一样,都有自己的特点,总会出些不必要的麻烦. 还有团队的进展也是看不到什么东西,说实话,这次我并没有太多关注团队的 ...

  10. Chapter 6 面向对象基础

    面向对象=对象+类+继承+通信,如果一个软件系统采用这些概念来建立模型并给予实现,那么它就是面向对象的.面向对象的软件工程方法是面向对象方法在软件工程领域的全面运用涉及到从面向对象分析.面向对象设计. ...