移动端遮罩及阻止页面滑动,实用!!! 我们经常做一个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 ...
随机推荐
- 软件工程(GZSD2015) 第二次作业小结
第二次作业,从4月7号开始,陆续开始提交作业.根据同学们提交的作业报告,相比第一次作业,已经有了巨大改变,大家开始有了完整的实践,对那些抽象的名词也开始有了直观的感受,这很好.然后有一些普遍存在的问题 ...
- ubuntu 18.04安装pytorch、cuda、cudnn等
版权声明:本文为博主原创文章,欢迎转载,并请注明出处.联系方式:460356155@qq.com ubuntu 16.04用了1年多了,18.04版已经发布也半年了,与时俱进,重装Linux系统,这里 ...
- spring4配置文件详解
转自: spring4配置文件详解 一.配置数据源 基本的加载properties配置文件 <context:property-placeholder location="classp ...
- Shell命令-文件及内容处理之cut、rev
文件及内容处理 - cut.rev 1. cut:切割文件内容 cut命令的功能说明 cut 命令用于显示每行从开头算起num1 到 num2 的文字. cut命令的语法格式 cut [OPTION] ...
- vue脚手架工具
1.安装node.js 2.安装vue-cli npm install vue-cli -g vue -V(-V大写)查看版本信息 3.安装webpack 4.初始化项目 vue init webpa ...
- Building Forms with PowerShell – Part 1 (The Form)
For those of you familiar with Scripting languages you are probably used to using alternate applicat ...
- 使用ServletContext对象读取资源文件
备注:本文以properties文件为例 一.通过ServletContext读取文件 1.通过ServletContext读取放置在src下的properties文件 package com; im ...
- java并发编程实践——王宝令(极客时间)学习笔记
1.并发 分工:如何高效地拆解任务并分配给线程 同步:线程之间如何协作 互斥:保证同一时刻只允许一个线程访问共享资源 Fork/Join 框架就是一种分工模式,CountDownLatch 就是一种典 ...
- Loj #528. 「LibreOJ β Round #4」求和 (莫比乌斯反演)
题目链接:https://loj.ac/problem/528 题目:给定两个正整数N,M,你需要计算ΣΣu(gcd(i,j))^2 mod 998244353 ,其中i属于[1,N],j属于[1,M ...
- HDU - 1078 FatMouse and Cheese (记忆化搜索)
FatMouse has stored some cheese in a city. The city can be considered as a square grid of dimension ...