添加遮罩时禁止滚屏

写页面经常会遇到弹出层,为了突显弹出层,一般会设一个遮罩

<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,系统默认的浏览器和微信,都能如愿执行,费了几个小时终于搞定啦
时间: 2024-10-15 08:46:46

添加遮罩时禁止滚屏的相关文章

编程练习--模拟安装程序时的信息滚屏效果

第一次安装Discuz时,有一个数据库的安装过程,看到会自动滚屏显示的信息,感觉非常好奇,由于当时主要从事后端程序的开发,对前端这些神奇的效果,也只能是欣赏一下子. 现在突然想到要自己来实现这个效果,作为今天的编程练习,实属对当时那个效果的怀念. 先上一个朴素无奇的静态效果图: 点这里查看动态的在线演示效果:http://sandbox.runjs.cn/show/jvl11v0d 核心代码: function install(){ if(message.length>0){ var text

Android开源代码解读のOnScrollListener实现ListView滚屏时不加载数据

使用ListView过程中,如果滚动加载数据的操作比较费时,很容易在滚屏时出现屏幕卡住的现象,一个解决的办法就是不要在滚动时加载数据,而是等到滚动停止后再进行数据的加载.这同样要实现OnScrollListener接口,关于该接口的简要描述见上一篇文章,这里直接进行代码的分析: package hust.iprai.asce1885; import android.app.ListActivity; import android.content.Context; import android.o

Android左右滑动滚屏的实现

现如今主流的Android应用中,都少不了左右滑动滚屏这项功能,(貌似现在好多人使用智能机都习惯性的有事没事的左右滑屏,也不知道在干什么...嘿嘿),由于前段时间项目的需要,所以也对其研究了一下,总的来说滑屏实现有三种方式:(至于其他的实现方式目前后还没碰到...) 1.ViewPager 2.ViewFlipper 3.ViewFlow   一.ViewPager 官方文档介绍:http://developer.android.com/reference/android/support/v4/

FineReport中如何实现自动滚屏效果

对于一些特殊的模板,可能为了展示的更加丰富.全面会在一个页面放置很多图表.表格等内容.由于内容过多,超出了浏览器窗口的大小导致内容展示不全的情况.这样我们就需要用到JS滚屏效果来解决,这里主要介绍在FineReport中的具体制作方法. 添加加载结束事件 点击菜单模板>模板web属性>分页预览设置,选择"为该模板单独设置",添加一个"加载结束"后事件,如下图所示: JS代码如下: //从页面加载结束后延迟2000MS执行事件(滚动) setTimeout

基于 ECharts 封装甘特图并实现自动滚屏

项目中需要用到甘特图组件,之前的图表一直基于 EChart 开发,但 EChart 本身没有甘特图组件,需要自行封装 经过一番鏖战,终于完成了... 我在工程中参考 v-chart 封装了一套图表组件,所以这里只介绍甘特图组件的实现,图表的初始化.数据更新.自适应等不在这里介绍 一.约定数据格式 EChart 本身没有甘特图,但可以通过 EChart 提供的“自定义”方法 type: 'custom' 开发 const option = { series: [{ type: 'custom',

文字滚屏控件(SliderPanel)

http://www.delphifans.com/infoview/Article_629.html 日期:2005年9月6日 作者:arhaha {==================== 满天星共享软件注册服务中心 申明 ======================本软件由满天星共享软件注册服务中心(http://www.star-reg.com/)赞助冠名发布,目的在于促进技术交流,促进中国软件产业的发展与进步. 本软件的版权以及其他所有权益归原作者所有,满天星共享软件注册服务中心不承担

网页自动滚屏播放

好长时间不做网页了,今天老板说要做一个展示的demo,让这个demo 自动的播放 用js做了一个滚屏播放的代码 <script type="text/javascript"> var done = true; var speed = 4 //设置速度 var currentpos = 0, alt = 1, curpos1 = 0, curpos2 = -1 function initialize() { startit() } function scrollwindow(

配合网页滚屏播放,做解说词

---恢复内容开始--- 继上篇网页滚屏播放之后,再给播放的网页添加一个解说词,至于如何做滚屏播放,请参看上一篇:http://www.cnblogs.com/Steven-Love-Arlene/p/4822126.html 解说词的制作,开始准备找真人录的,但是由于时间紧,就直接写了一个解说稿子,然后用了一个文本转语音的软件合成了一段解说词,具体的软件网上很多,大同小异,不做推荐.但是如果有兴趣的可以用科大讯飞的SDK自己做一个. 配上添加音频的代码: <!--播放音频--> <di

APP进入后台时自动截屏的应对方法

点击HOME键使应用进入后台时,iOS会自动对当前屏幕进行截屏处理,并保存成图片文件. 在Mac中可以看到,这些截屏文件会被保存在下述路径中: <Home>/Library/Caches/Snapshots/(Bundle identifier)/ 且文件名以"UIApplicationAutomaticSnapshotDefault-"开头. 这些自动生成的截屏文件,对启用了密码保护功能的应用而言,在安全性方面会是个比较严重的问题. 经过各种试验,找到了3中解决方法. 方