移動端彈出層滾動穿透問題示列

時間 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')
});

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。