添加遮罩时禁止滚屏
来源:互联网 发布:淘宝国际版apk 编辑:程序博客网 时间:2024/06/05 10:05
添加遮罩时禁止滚屏
写页面经常会遇到弹出层,为了突显弹出层,一般会设一个遮罩
<div class="mask"></div>遮罩层的样式为:
.mask{ width: 100%; height: 100%; background: rgba(0, 0, 0, 0.8); position: fixed; top: 0; left: 0; z-index: 998; display: none;}
可是这时会有一个问题,就是即使给遮罩层设为跟屏幕一样高一样宽,但一滚轮或手动时底下的页面如超过一屏仍会滚,如果禁止呢?有同学说这个不简单吗?直接给body设成100%高overflow:hidden就行了以下代码:
document.body.style.overflow='hidden';
document.body.style.height='100%';
在chrome里一试,果然行,纹丝不动啊,太神奇了是不是?可是不能光在chrome里测啊,咱还得考虑有人用了火狐啊QQ啊欧朋啊,在火狐里一试,页面照样能滚,真叫人皱眉头,不得已,继续搜,看有没有高见,又有同学说了把滚动条设为无,可是设为无只是不显示并不代表页面不滚哪,还有的说可以监听事件滚动的时候把scroolTop的值改为0,
window.onscroll=
function
(){
document.body.scrollTop = 0
}
试了一下好象也无济于事哎(或许是手机端的事件跟电脑端不同原因),忽然想既然chrome里行,火狐不行没准是兼容的问题,于是写了一条加上:
document.body.style.overflow='hidden';
document.body.style.height='100%';
document.documentElement.style.overflow='hidden'
再试火狐也ok了,原来真是兼容性问题,但我们项目是在微信里用的,还得在微信里测下,据说微信调用浏览器,如果手机上安装了qq浏览器则会调用QQ浏览器,如果没有则调用系统自带的,在微信里一测,可以禁止滚动,但是在释放时不行了,别的浏览器释放后能正常滚动,恢复到未弹出层时状态,就是页面超过一屏是可以滚动的,但是微信释放后也不能滚动了,这可怎么办,前功尽弃了?只能再查,终于找到了,在touchmove时禁用浏览器默认事件,
document.addEventListener('touchmove', function (event) { event.preventDefault(); })
我只需要在遮罩弹出时禁用,遮罩关闭时释放,于是我改了下代码:
var aBtn=$('#a1'); //点击按钮var guide=$('.guide'); //弹出的遮罩层var flag=0; //标识,初始为0aBtn.tap(function() { guide.css('display', 'block'); //显示遮罩 flag=1;});document.addEventListener('touchmove', function (event) { //监听滚动事件 if(flag==1){ //判断是遮罩显示时执行,禁止滚屏 event.preventDefault(); //最关键的一句,禁止浏览器默认行为 }})guide.tap(function(){ guide.css('display','none'); //隐藏遮罩 flag=0; //重置为0});
这里我使用了zepto.js库,再测了下,火狐,chrome,opera,QQ,系统默认的浏览器和微信,都能如愿执行,费了几个小时终于搞定啦
阅读全文
1 0
- 添加遮罩时禁止滚屏
- 禁止滚屏
- 添加遮罩时禁止滚屏,同时已经滚动的页面不会跑到最顶部去然后划不动
- C#Listview添加数据,选中最后一行,滚屏
- 禁止添加web引用
- 禁止用户添加新手
- 解决滚屏背景/拼接地图有黑边(缝隙)/动画播放出现毛边以及禁止游戏中自动锁屏问题!
- 【iOS-Cocos2d游戏开发之十八】解决滚屏背景/拼接地图有黑边(缝隙)及禁止自动锁屏问题!
- listView添加内容自动滚到底部
- Basic MSI如何添加自定义回滚?
- javascript 实现滚屏
- 平滑滚屏
- 双击自动滚屏
- JScrollPane自动滚屏
- Moss滚屏
- 双击自动滚屏
- JS滚屏实现
- asp.net 滚屏
- java实现HMACSHA256加密签名
- 文件共享项目
- js: 从setTimeout说事件循环模型
- IntelliJ IDEA----常用快捷键
- C++中的“error:LNK2005 已经在*.obj中定义”异常
- 添加遮罩时禁止滚屏
- Express + Mongoose 基础使用
- VM虚拟机游戏多开防检测 游戏不能登录处理详解
- Kafka+Influxdb+Grafana实现灵活集群服务监控
- 爬取电影天堂并存入数据库
- 跟着9张思维导图学习Javascript
- 最小生成树模板
- 欢迎使用CSDN-markdown编辑器
- js中获取键盘事件