移动端遮罩及阻止页面滑动,实用!!! 我们经常做一个fixed定位的遮罩和一个提示弹框,这时就要用到。记录--
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定位的遮罩和一个提示弹框,这时就要用到。记录--的更多相关文章
- ios 底部用定位 fixed。在软件盘出来后,页面元素被顶上去一部分,fixed定位的footer也跑到了上面去。解决方法
ios 底部用定位 fixed.在软件盘出来后,页面元素被顶上去一部分,fixed定位的footer也跑到了上面去.解决方法 $("input").focus(function() ...
- vue移动端出现遮罩层时在遮罩层滑动时禁止遮罩层下方页面滑动
h5页面 点击出现弹框时 在遮罩层上面滑动时 下方的页面会出现滑动现象 解决方法 我知道的有以下两种 在遮罩层标签上添加@touchmove.prevent 把遮罩层显示时把下方的父盒子css设置为固 ...
- 【移动端】js禁止页面滑动与允许滑动
禁止页面滑动 通常静止滑动方案:(阻止滑动事件) window.ontouchmove=function(e){ e.preventDefault && e.preventDefaul ...
- 利用layer实现MVC页面数据互交提示弹框
需求说明: 一个表单页面,点击提交之后,进入后台进行一系列数据交互,然后将交互信息返回至页面中,并以弹框形式展示 应用场景: 添加.修改.删除数据后,返回数据操作是否成功,以及一些其他信息 前期准备: ...
- 移动端和PC端弹出遮罩层后,页面禁止滚动的解决方法及探究
PC端解决方案 pc端的解决思路就是在弹出遮罩层的时候取消已经存在的滚动条,达到无法滚动的效果. 也就是说给body添加overflow:hidden属性即可,IE6.7下不会生效,需要给html增加 ...
- Android Launcher分析和修改6——页面滑动(PagedView)
本来打算分析CellLayout的源码,不过因为它们之间是容器包含关系,所以打算先把PagedView分析.PagedView代码很多,今天主要是分析跟核心功能相关的代码.PagedView主要实现一 ...
- jquery mobile将页面内容当成弹框进行显示
注:必须使用相对应版本的jquery mobile css.不然无法正常显示 <div data-role="page" id="pageone"> ...
- ios端阻止页面滚动露底
转自 http://www.eboy.me/archives/129: 在IOS端的微信中使用H5页面,页面滑动到底部时,再向上拉或页面在顶部时下拉,总会露出微信自带的底色:总是会让人不爽. 以下是一 ...
- javascript移动端禁止页面滑动的解决方案
1 前言 移动端网页,发现ios平台的iphone或者ipad,网页可以上下左右移动,而Android版则不会.仅作为记录使用. 2 代码 var mo=function(e){e.preventDe ...
随机推荐
- [转帖] CA如何保护自己的私钥
作者:Gh0u1L5链接:https://www.zhihu.com/question/22260090/answer/648910720来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业 ...
- Android艺术——Bitmap高效加载和缓存代码分析(2)
Bitmap的加载与缓存代码分析: 图片的压缩 比如有一张1024*768像素的图像要被载入内存,然而最终你要用到的图片大小其实只有128*96,那么我们会浪费很大一部分内存,这显然是没有必要的,下面 ...
- centos7之rsync+serrsync
Rsync+Inotify-tools与Rsync+sersync这两种架构有什么区别 1.Rsync+Inotify-tools(1):Inotify-tools只能记录下被监听的目录发生了变化(包 ...
- php提供的用户密码加密函数
在实际项目中,对用户的密码加密基本上采用的 md5加盐的方式, php5.5后提供了一个加密函数,不需要手动加盐,不需要去维护盐值, $str = "123456"; $pwd ...
- python基础之小数据池、代码块、编码和字节之间换算
一.代码块.if True: print(333) print(666) while 1: a = 1 b = 2 print(a+b) for i in '12324354': print(i) 虽 ...
- Magento 2 Plugin - Interceptor - Magento 2插件 - 拦截器-插件开发
Magento 2 Plugin - Interceptor - Magento 2插件 - 拦截器 Magento 2 Plugin is a technical plugin for your b ...
- 【BZOJ5496】[十二省联考2019]字符串问题(后缀树)
[BZOJ5496][十二省联考2019]字符串问题(后缀树) 题面 BZOJ 洛谷 题解 首先显然可以把具有支配关系的串从\(A\)到\(B\)连一条有向边,如果\(B_i\)是\(A_j\)的前缀 ...
- JDK动态代理(Proxy)的两种实现方式
JDK自带的Proxy动态代理两种实现方式 前提条件:JDK Proxy必须实现对象接口 so,创建一个接口文件,一个实现接口对象,一个动态代理文件 接口文件:TargetInterface.java ...
- pc安装完成charles成功,小米安装crt证书失败
问题描述: 今天在学习爬虫爬取APP内容时,需要安装crt证书.根据静谧大大的书,前面都挺顺利的.但在我的小米手机上安装crt证书时,出现了错误.手机显示无法安装. 解决之道: 1.不要用小米手机自带 ...
- 精通Dubbo——Dubbo支持的协议的详解
转: 精通Dubbo——Dubbo支持的协议的详解 2017年06月02日 22:26:57 孙_悟_空 阅读数:44500 Dubbo支持dubbo.rmi.hessian.http.webse ...