写页面经常会遇到弹出层,为了突显弹出层,一般会设一个遮罩
<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