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. 【转】/bin/bash^M: bad interpreter: No such file or directory

    执行一个脚本full_build.sh 时, 一直是提示我: -bash: ./full_build.sh: /bin/bash^M: bad interpreter: No such file or ...

  2. Java的selenium代码随笔(1)

    package ShareClass; import java.awt.AWTException;import java.awt.Robot;import java.awt.Toolkit;impor ...

  3. [转帖]Windows 10 部分早期版本已完全停止技术支持服务

    Windows 10 部分早期版本已完全停止技术支持服务 2019-4-12 01:27| 发布者: cjy__05| 查看: 10186| 评论: 47|来自: pcbeta 收藏分享 转帖来源:h ...

  4. js02-常用流程控制语句

    1.if语句 语法:if(条件){ 条件成立时执行 }else{ 条件不成立执行 } 例 var ji = 20; if(ji>=20){ console.log('恭喜你,吃鸡成功,大吉大利' ...

  5. 【转】CENTOS/RHEL 7 系统中设置SYSTEMD SERVICE的ULIMIT资源限制

    在bash中,有个ulimit命令,提供了对shell及该shell启动的进程的可用资源控制.主要包括打开文件描述符数量.用户的最大进程数量.coredump文件的大小等. 在centos 5/6 等 ...

  6. 【NLP】Conditional Language Modeling with Attention

    Review: Conditional LMs Note that, in the Encoder part, we reverse the input to the ‘RNN’ and it per ...

  7. django restframework permission

    与 authentication 和 throttling 一起,permission 决定是应该接受还是拒绝访问请求.权限检查总是在视图的最开始处运行,在任何其他代码被允许进行之前.权限检查通常会使 ...

  8. OI中卡常数技巧

    一.I/O优化 读入优化是卡常数最重要的一条! inline int read() { ,f=;char c=getchar(); ;c=getchar();} +c-';c=getchar();} ...

  9. 洛谷P3205 [HNOI2011]合唱队 DP

    原题链接点这里 今天在课上听到了这个题,听完后觉得对于一道\(DP\)题目来说,好的状态定义就意味着一切啊! 来看题: 题目描述 为了在即将到来的晚会上有更好的演出效果,作为AAA合唱队负责人的小A需 ...

  10. 学习python第二天

    编程语言分为哪几种? 1. 机器语言:是通过直接编写二进制指令对计算机下达指令的编程方式 -- 0000,0000,00000000001:加载 暂存区A 存储器地址1 2. 汇编语言:是通过编写二进 ...