zoukankan      html  css  js  c++  java
  • 移动端下弹框禁止背景滑动

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

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

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

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

    原文地址:https://segmentfault.com/a/1190000016820135

  • 相关阅读:
    实验一 命令解释程序的编写
    试验二
    实验一 命令解释程序的编写(重交)
    Sqlserver数据库帮助类(EFTools)
    js验证
    sqlserver中从日期字段取得月份
    IIS不可用或者有问题解决方法
    professional email address collections
    从psd文件到html
    空白符对HTML结构的影响与解决方案
  • 原文地址:https://www.cnblogs.com/lalalagq/p/9901546.html
Copyright © 2011-2022 走看看