弹窗出现时,常常伴随遮罩层的出现,此刻会出现两种需求:
一、弹框出现,禁止页面滚动,弹框消失,一切恢复正常;
【方法1】
.offhidden {overflow: hidden;height: 100%; }
关闭窗口时,执行
$('html,body').removeClass('offhidden');
打开窗口时,执行
$('html,body').addClass('offhidden');
【方法2】
给body动态添加删除poistion:fixed属性。
但是方法1和方法2会存在一个BUG,即点击页面中间或底部的预约看房,弹窗出现并自动回到顶部。然而需求往往只是点击按钮,弹窗遮罩层出现而已,页面不要自行滚动至顶部。
【方法3】
设置开关变量,在页面滚动的时候,监听页面滚动事件。
var flag=-1; $(window).on('scroll',function(event) {flag !==-1 && $(this).scrollTop(flag); });
关闭窗口时,执行
flag =-1;
打开窗口时,执行
flag=$(window).scrollTop();
【方法4】
在touchmove事件中阻止浏览器的默认行为。
e.preventDefault();
二、弹框是否出现,都不影响页面滚动情况。
页面可以滚动,动态计算高度,没加载完,遮罩层会显示不全。