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

pf_miles 发布于2019-08-29 17:04 / 2814人阅读

摘要：移动端下弹框禁止背景滑动茴字写法有很多种，找到最适合的才是好的。

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

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

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

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

GPU云服务器云服务器下弹框 js弹框禁止滚动 js?移动端滑动无法禁止移动窗口

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/114085.html

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

摘要：移动端下弹框禁止背景滑动茴字写法有很多种，找到最适合的才是好的。移动端下弹框禁止背景滑动茴字写法有很多种，找到最适合的才是好的。以下下方法在一屛之内是可行的 body;html 设置overflow:hidden .overflow-hidden{ height: 100%; overflow: hidden; } // 弹出时 $(html, body,.pa...

baukh789 2019-08-02 11:50 评论0 收藏0
618购物节来袭，电商陪你浪浪浪

摘要：导航栏导航栏用的组件，设置其水平方向滑动，点击到的字体会变换样式。而且，导航栏点击不同的类别会将主页替换成不同的结构，这就要将最开始的主页结构隐藏起来。前言购物节又要来啦！！（撒花撒花！）零食打折啦！！衣服打折了！！小伙伴们准备好买买买了吗！！！让我看看我还多少余额哈！（满心期待(*￣︶￣)）（10秒后......）好吧我还是写个电商小程序过过瘾好了。[冷漠脸]咳咳，让我们进入正题...

selfimpr 2019-08-29 15:42 评论0 收藏0
618购物节来袭，电商陪你浪浪浪

摘要：导航栏导航栏用的组件，设置其水平方向滑动，点击到的字体会变换样式。而且，导航栏点击不同的类别会将主页替换成不同的结构，这就要将最开始的主页结构隐藏起来。前言购物节又要来啦！！（撒花撒花！）零食打折啦！！衣服打折了！！小伙伴们准备好买买买了吗！！！让我看看我还多少余额哈！（满心期待(*￣︶￣)）（10秒后......）好吧我还是写个电商小程序过过瘾好了。[冷漠脸]咳咳，让我们进入正题...

hellowoody 2019-08-22 18:00 评论0 收藏0
618购物节来袭，电商陪你浪浪浪

摘要：导航栏导航栏用的组件，设置其水平方向滑动，点击到的字体会变换样式。而且，导航栏点击不同的类别会将主页替换成不同的结构，这就要将最开始的主页结构隐藏起来。前言购物节又要来啦！！（撒花撒花！）零食打折啦！！衣服打折了！！小伙伴们准备好买买买了吗！！！让我看看我还多少余额哈！（满心期待(*￣︶￣)）（10秒后......）好吧我还是写个电商小程序过过瘾好了。[冷漠脸]咳咳，让我们进入正题...

MarvinZhang 2019-08-02 10:41 评论0 收藏0