html5 遮罩层禁止滚动,移动端下弹框禁止背景滑动

移动端下弹框禁止背景滑动

茴字写法有很多种，找到最适合的才是好的。

以下下方法在一屛之内是可行的

body;html 设置overflow:hidden

.overflow-hidden{

height: 100%;

overflow: hidden;

}

// 弹出时

$('html, body,.page').addClass('overflow-hidden');

// 隐藏时

$('html, body,.page').removeClass('overflow-hidden');

问题

当body内容超出一屛时，弹框背景页面会自动滚动到顶部，无法回到原来弹框所在的位置

保存scrollTop，再设置scrollTo

var top = $(window).scrollTop();

// 弹出时

$("body .page").css({

"position": "fixed",

"top": -top,

"left": 0,

"right": 0,

"bottom": 0

}),

// 隐藏式

$("body .page").css({

"position": "static"

});

$("html").css({

"scroll-behavior": "unset"

});

$(window).scrollTop(top),

$("html").css({

"scroll-behavior": "smooth"

});

问题

当body内容超出一屛时，弹框背景页面会自动滚动到顶部，无法回到原来弹框所在的位置

页面发生了 top 和页面滚动;页面会有闪烁的情况

绑定touchmove事件，然后调用preventDefault()

function preventDefaultFn(event){

event.preventDefault();

}

// 弹出时 遮罩层

$('.modal-overlay').on('touchmove', preventDefaultFn);

// 隐藏时 遮罩层

$('.modal-overlay').off('touchmove', preventDefaultFn);

问题

弹框中还有滚动的内容，滚动内容也无法滚动

解决

给弹框内需滚动的元素添加标记，在判断是否执行event.preventDefault();

给main元素添加position:absolute(推荐)

.page {

/* main绝对定位，进行内部滚动 */

position: absolute;

top: 0;

bottom: 0;

right:0;

left:0;

/* 使之可以滚动 */

overflow-y: scroll;

/* 增加该属性，可以增加弹性 */

-webkit-overflow-scrolling: touch;

}

.overflow-hidden{

overflow: hidden;

}

// 弹出时

$('.page').addClass('overflow-hidden');

// 隐藏时

$('.page').removeClass('overflow-hidden');

优点

没有上述这些问题

随带解决了ios fixed 的相关bug

缺点

需要改页面结构

css代码微多