移动端下弹框禁止背景滑动
移动端下弹框禁止背景滑动
茴字写法有很多种,找到最适合的才是好的。
以下下方法在一屛之内是可行的
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');
<div class="page">
<!-- 内容在这里... -->
</div>
优点
- 没有上述这些问题
- 随带解决了ios fixed 的相关bug
缺点
- 需要改页面结构
- css代码微多