document.body.style.height = '100%';
document.body.style.overflow = 'hidden';
document.getElementById('mark').addEventListener('touchstart', (e) => {
e.stopPropagation();
e.preventDefault();
}, false);

.mark 类名的dom元素即为遮罩层的类名。

取消遮罩后,恢复滑动,只需如下:

     document.body.style.height = 'auto';
document.body.style.overflow = 'auto';

移动端遮罩及阻止页面滑动,实用!!! 我们经常做一个fixed定位的遮罩和一个提示弹框,这时就要用到。记录--的更多相关文章

  1. ios 底部用定位 fixed。在软件盘出来后,页面元素被顶上去一部分,fixed定位的footer也跑到了上面去。解决方法

    ios 底部用定位 fixed.在软件盘出来后,页面元素被顶上去一部分,fixed定位的footer也跑到了上面去.解决方法 $("input").focus(function() ...

  2. vue移动端出现遮罩层时在遮罩层滑动时禁止遮罩层下方页面滑动

    h5页面 点击出现弹框时 在遮罩层上面滑动时 下方的页面会出现滑动现象 解决方法 我知道的有以下两种 在遮罩层标签上添加@touchmove.prevent 把遮罩层显示时把下方的父盒子css设置为固 ...

  3. 【移动端】js禁止页面滑动与允许滑动

    禁止页面滑动 通常静止滑动方案:(阻止滑动事件) window.ontouchmove=function(e){ e.preventDefault && e.preventDefaul ...

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

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

  5. 移动端和PC端弹出遮罩层后,页面禁止滚动的解决方法及探究

    PC端解决方案 pc端的解决思路就是在弹出遮罩层的时候取消已经存在的滚动条,达到无法滚动的效果. 也就是说给body添加overflow:hidden属性即可,IE6.7下不会生效,需要给html增加 ...

  6. Android Launcher分析和修改6——页面滑动(PagedView)

    本来打算分析CellLayout的源码,不过因为它们之间是容器包含关系,所以打算先把PagedView分析.PagedView代码很多,今天主要是分析跟核心功能相关的代码.PagedView主要实现一 ...

  7. jquery mobile将页面内容当成弹框进行显示

    注:必须使用相对应版本的jquery mobile css.不然无法正常显示 <div data-role="page" id="pageone"> ...

  8. ios端阻止页面滚动露底

    转自 http://www.eboy.me/archives/129: 在IOS端的微信中使用H5页面,页面滑动到底部时,再向上拉或页面在顶部时下拉,总会露出微信自带的底色:总是会让人不爽. 以下是一 ...

  9. javascript移动端禁止页面滑动的解决方案

    1 前言 移动端网页,发现ios平台的iphone或者ipad,网页可以上下左右移动,而Android版则不会.仅作为记录使用. 2 代码 var mo=function(e){e.preventDe ...

随机推荐

  1. 软工+C(3): 超链接

    // 上一篇:分数和checklist // 下一篇:Alpha/Beta换人 注:平常看文章,总有能和构建之法,软件工程相关的链接,增量记录,也可以通过在其他人博客的交流中使用相关的超链接,在使用中 ...

  2. idea在Terminal中使用maven指令

    如果无法直接使用mvn指令,那么这里需要配置你idea中的maven的环境变量, 先说maven在idea中的位置,在你idea安装目录下的\plugins\maven 接下来配置环境变量:在你的用户 ...

  3. jsp篇 之 指令元素和动作元素

    Jsp指令元素分类与书写格式: 书写格式: <%@ 指令类型  属性="值" ..  %> 分类: [page include taglib]三种. 1,page指令: ...

  4. Flask的插件session、SQLAlchemy、Script、Migrate

    一.flask-session 1.为什么要使用flask-session 因为flask默认的session是通过请求上下文放入到Local中的,是存在内存的,而使用flask-session可以更 ...

  5. Java使用J4L识别验证码

    1.首先要下载j4l的相应文件和jar 下载地址:http://www.java4less.com/ocrtools/ocrtools.php?info=download 2.下载完成之后解压,文件目 ...

  6. php+mysql+nginx+liunx 服务搭建

    安装php7相应的yum源   CentOS 7.x:   # rpm -Uvh https://dl.fedoraproject.org/pub/epel/epel-release-latest-7 ...

  7. CF24D Broken robot

    题目链接 题意 有一个\(n \times m\)的矩阵.机器人从点\((x,y)\)开始等概率的往下,往右,往左走或者不动.如果再第一列,那么不会往左走,再第m列不会往右走.也就是说机器人不会走出这 ...

  8. pycharm 运行错误信息显示乱码

    pycharm版本 解决方法:

  9. Window下Eclipse+Tomcat远程调试

    需求:       项目在开发环境跑得好好的,但是当发布到服务器上时,却出现了一些意外的问题.服务器上不可能给你装IDE调试工具啊,又没有很好的日志帮助下,这时候就用到了JVM的Java Platfo ...

  10. 分享4个运维平台工具OSSIM、Ansible的学习思路

    对于当今企业安全来说,真正价值不在于亡羊补牢,也不在于一个或多个高危漏洞.企业在乎的是如何防患于未然,如何快速定位攻击,如何快速解决安全问题.OSSIM作为开源的安全信息管理平台,对于企业的需求来说毋 ...