移动端弹出层滚动穿透问题示列

时间 2019-11-08

标签移动弹出滚动穿透问题栏目无线繁體版

原文原文链接

1.移动端滚动穿透问题 http://ask.aseoe.com/m/article/58javascript

2.滚动条穿透问题2 http://m.jb51.net/show/91244 css

3.滚动条问题3 http://m.jb51.net/show/91510 html

4.移动端滚动条完美解决方案 http://m.blog.csdn.net/luotianyi1205/article/details/78223083java

5.滚动穿透5 http://m.blog.csdn.net/k491022087/article/details/76020369web

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <title></title>
        <script src="js/mui.min.js"></script>
        <link href="css/mui.min.css" rel="stylesheet" />
        <style>
            .scrollFix {
                height: 100%;
                overflow: hidden;
                position: relative;
            }
            
            .scrollFix body {
                height: 100%;
                overflow: hidden;
            }
            
            ::-webkit-scrollbar{
                display: none;
            }
            
            /*第一层*/
            .elasticLayer{
               position: fixed;
    　　　　　　left: 0;
    　　　　　　bottom: 0;
    　　　　　　width: 100%;
   　　　　　　 height: 100%;
    　　　　　　background: #fff;
    　　　　　　z-index: 12;
    　　　　　　transform: translateY(100%);
    　　　　　　transition: .2s  linear;
            }
            /*第二层*/
            .elasticLayer-specific {
                width: 100%;
                height: 100%;
            }
            /*第二层头部*/
            .specific-head {
                position: fixed;
                width: 100%;
                text-align: center;
                line-height: 44px;
                color: #000;
                background: #f7f7f7;
            }
            .head-back {
                position: absolute;
                top: 0;
                left: 0;
                width: 44px;
                height: 44px;
                line-height: 44px;
                color: blue;
            }
            /*第二层具体内容*/
            .specific-content{
                padding-top: 44px;
            }
            /*第二层具体内容下的可滚动区域，结合js自动计算高度*/
            .content-main{
                overflow-y: auto;
            }
　　　　/*https://www.jianshu.com/p/9110885dec44 隐藏滚动条*/
            .content-main::-webkit-scrollbar{
                width: 0;
　　　　　　　　　
            }
            
            #btn{
                position: absolute;
                right: 0;
                top:70%;
                
            }
        </style>
        <script type="text/javascript" charset="utf-8">
            mui.init();
        </script>
    </head>

    <body>
        
        <!--
            http://ask.aseoe.com/article/58
            移动端弹出层滚动穿透问题
        -->
        <header class="mui-bar mui-bar-nav">
            <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
            <h1 class="mui-title">首页</h1>
        </header>
        <nav class="mui-bar mui-bar-tab">
            <a class="mui-tab-item mui-active">
                <span class="mui-icon mui-icon-home"></span>
                <span class="mui-tab-label">首页</span>
            </a>
            <a class="mui-tab-item">
                <span class="mui-icon mui-icon-phone"></span>
                <span class="mui-tab-label">电话</span>
            </a>
            <a class="mui-tab-item">
                <span class="mui-icon mui-icon-email"></span>
                <span class="mui-tab-label">邮件</span>
            </a>
            <a class="mui-tab-item">
                <span class="mui-icon mui-icon-gear"></span>
                <span class="mui-tab-label">设置</span>
            </a>
        </nav>
        <div class="mui-content">

            <input id="btn" type="button" name="" id="" value="点击" />
        </div>
        <div class="elasticLayer">
            <div class="elasticLayer-specific">
                <div class="specific-head"><span class="head-back" id="head-back"><</span> 我是固定头部</div>
                <div class="specific-content">
                    <div class="content-main"></div>
                </div>
            </div>
        </div>

        <script src="js/zepto.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="js/persist.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            for(var i = 0; i <= 40; i++) {
                $(".mui-content").append('<p>第' + i + '条数据</p>')
            }
            for(var i = 0; i <= 40; i++) {
                $(".content-main").append('<p>遮罩里第' + i + '条数据</p>')
            }

            $(window).on('load resize', function() {
                $(".content-main").height($(window).height() - $(".mui-bar-nav").height())
            });
            
            $("#btn").on('tap', function() {
                $(".elasticLayer").animate({left:0});
                $('html,body').animate({elasticLayerTop: 0}, 100);
                $("html").addClass('scrollFix')
            });

            $("#head-back").on('tap', function() {
                $(".elasticLayer").animate({left:'100%'});
                $("html").removeClass('scrollFix')
            });

        </script>
    </body>

</html>-webkit-overflow-scrolling: touch;

6：https://blog.csdn.net/qq_35741728/article/details/52958140 第二app

  .scrollFix2{
            position: fixed;
        }
function addNote(){
         var  remarkTextarea=document.querySelector('.remark_textarea');
         var  oldValue='';
         //点击添加备注
         remarkTextarea.addEventListener('tap',function () {

             var div=document.createElement('div');
             div.className='pop_up';

             var htmlStr=[
                 '<div class="pop_up_box">',
                     '<textarea class="textarea" name="" id=""  placeholder="添加备注(选填)">'+oldValue+'</textarea>',
                     '<div class="mui-clearfix">',
                         '<button type="button" class="mui-btn  canleBtn   mui-pull-left">取消</button>',
                         '<button type="button" class="mui-btn okBtn mui-pull-right">肯定</button>',
                     '</div>',
                 '</div>'
             ].join('');
             div.innerHTML=htmlStr;


             var  top=window.scrollY;
             document.body.classList.add('scrollFix2')
             document.body.style.top=-top+'px';

             document.body.appendChild(div)

             var  popUp=document.querySelector('.pop_up');

            //点击取消按钮
             var  canleBtn=document.querySelector('.canleBtn');
             canleBtn.addEventListener('tap',function () {
                 document.body.removeChild(popUp)

                 document.body.classList.remove('scrollFix2')
                 window.scrollTo(0,top)
             })
            //点击肯定按钮
             var  okBtn=document.querySelector('.okBtn');
             var  textarea=document.querySelector('.textarea');
             okBtn.addEventListener('tap',function () {
                 remarkTextarea.innerHTML=oldValue=textarea.value;
                 document.body.removeChild(popUp)

                 document.body.classList.remove('scrollFix2')
                 window.scrollTo(0,top)
             })
         })



     }

新的ide

<div class="m-layer">
            <div class="m-layer-inside">
                <div class="m-layer-head">
                    <a  class="m-layer-head-back  mui-icon mui-icon-left-nav"  id="m-layer-head-back"></a>
                    <h1 class="m-layer-head-title">xxx</h1>
                    <a class="m-layer-head-btn">肯定 <span>(40)</span></a>
                </div>
                <div class="m-layer-body">
                    <div class="m-layer-body-con"></div>
                </div>
            </div>
        </div>


.scrollFix {
    height: 100%;
    overflow: hidden;
    position: relative;
}

.scrollFix body {
    height: 100%;
    overflow: hidden;
}

::-webkit-scrollbar{
    display: none;
}


.m-layer{
    position: fixed;
    left: 100%;
    bottom: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
    transition: .1s linear;
    z-index: 100;
}

.m-layer-inside {
    width: 100%;
    height: 100%;
}
/*第二层头部*/
.m-layer-head {
    position: fixed;
    width: 100%;
    text-align: center;
    line-height: 44px;
    height: 44px;
    background-color: #3290e8

}
.m-layer-head-back {
    float: left;
    width: 44px;
    height: 44px;
    line-height: 44px;
    color: #fff;
   
}
.m-layer-head-back:active {
    color: #fff;
}
.m-layer-head-title{
    position: absolute;
    right: 100px;
    left: 40px;
    color: #fff;
    font-size: 17px;
    font-weight: 500;
    line-height: 44px;

}
.m-layer-head-btn{
    float: right;
    width: 100px;
    height: 44px;
    line-height: 44px;
    color: #fff;
}
.m-layer-body{
    padding-top: 44px;
}
.m-layer-body-con{
    overflow-y: auto;
    height: auto;
}



//点击页面测试
$("#btn").on('tap', function() {
    $(".m-layer").animate({left:0});
    $('html,body').animate({elasticLayerTop: 0}, 100);
    $("html").addClass('scrollFix')
});

//计算弹层内容.m-layer-body-con的高度
$(window).on('load resize', function() {
    $(".m-layer-body-con").height($(window).height() - 44)
});
//弹层点击返回
$("#m-layer-head-back").on('tap', function() {
    $(".m-layer").animate({left:'100%'});
    $("html").removeClass('scrollFix')
});