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

  • 相关阅读:
    开源一些C#不常用知识(附上DEMO)
    开源:C# 代码自动生成工具,支持站点前后台
    Xposed 集成 Android 6.0.1环境中,总结
    Android 视频通信,低延时解决方案
    Android studio,第一个生成,调用成功的jni(说多了都是泪)
    C#之文件缓存
    JavaScript 基本常识
    排序算法
    LeetCode:字符串转换整数 (atoi)
    LeetCode:判断回文数
  • 原文地址:https://www.cnblogs.com/lalalagq/p/9901546.html
Copyright © 2011-2022 走看看