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. 《构建之法》课程进度之Github、Travis等工具融入篇

    <构建之法>里有一个16周的软件工程课程进度设计.本文在该基本设计的基础上,围绕github.com(源码管理).travis-ci.org(持续集成).单元测试工具.日志工具.少数实用U ...

  2. 阿里云对象存储OSS与文件存储NAS的区别

    一.简介 应用场景:选择一款存储产品,面向文档数据的存取,不会涉及到数据处理. 产品选型主要从OSS和NAS中选择一款,满足文档存储的需求. 二.NAS优缺点 NAS 是一种采用直接与网络介质相连的特 ...

  3. 使用Node.js搭建数据爬虫crawler

    0. 通用爬虫框架包括: (1) 将爬取url加入队列,并获取指定url的前端资源(crawler爬虫框架主要使用Crawler类进行抓取网页) (2)解析前端资源,获取指定所需字段的值,即获取有价值 ...

  4. 三、调试IIS启动域名配置

    一.IIS配置启动VS以及域名 1.hosts配置 2.配置 注意: 1.Web和Api 端口在IIS都设置80即可,都可以同时运行不冲突,与vs的IIS express启动方式不同vs会指定不同的两 ...

  5. 一、Win10搭建IIS

    一.控制面板-启动或关闭Windows功能 二.找到Internet Information Services项-全勾选 点击确定 三.在浏览器地址栏输入:localhost之后显示下面页面,证明安装 ...

  6. Nginx 请求的11个阶段

    48 1:当请求进入Nginx后先READ REQUEST HEADERS 读取头部 然后再分配由哪个指令操作 2:Identity 寻找匹配哪个Location  3:Apply Rate Limi ...

  7. ElasticSsarch汇总

    用途: 分布式实时文件存储,并将每一个字段都编入索引,使其可以被搜索: 实时分析的分布式搜索引擎: 可以扩展到上百台服务器,处理PB级别的结构化或非结构化数据. 点击查看安装.基本增删改查操作REST ...

  8. 下载图片没有关闭http输入流导致下载超时

    在某次接入第三方厂商数据时,需要根据对方提供的URL地址下载图片,当数据量大时会遇到很多的下载图片超时问题,开始以为是第三方厂商的问题,对方排查了很久之后,说是我这边下载数据全部留在缓存区,导致缓存区 ...

  9. <Android基础>(四) Fragment Part 1

    Fragment 1)Fragment的简单用法 2)动态添加Fragment 3)在Fragment中模拟返回栈 4)Fragment和活动之间通信 第四章 Fragment Fragment是一种 ...

  10. 【POJ 1740】A New Stone Game

    这真是一道博弈论的好题啊 还是采用OI届的惯用套路,从简单想起 如果只有一堆石子,那么一定先手必胜 如果有两堆石子,那么我们考虑如下两种情况 2.1 两堆石子数量相同,那么无论先手怎么拿,后手都有一种 ...