实现移动端下弹框禁止背景滑动的案例

这篇文章主要介绍了实现移动端下弹框禁止背景滑动的案例，具有一定借鉴价值，需要的朋友可以参考下。希望大家阅读完这篇文章后大有收获。下面让小编带着大家一起了解一下。

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

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

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代码微多

感谢你能够认真阅读完这篇文章，希望小编分享实现移动端下弹框禁止背景滑动的案例内容对大家有帮助，同时也希望大家多多支持亿速云，关注亿速云行业资讯频道，遇到问题就找亿速云，详细的解决方法等着你来学习!