移動頁面滾動穿透解決方案（薦）

時間 2019-11-13

標籤移動頁面滾動穿透解決方案欄目無線简体版

原文原文鏈接

移動頁面滾動穿透解決方法目前有多種解決方案，我介紹下幾種方案： javascript

解決方案1：阻止冒泡。css

//關鍵代碼
$(".sliders,.modals").on("touchmove",function(event){
    event.preventDefault();
});

所有代碼附上：html

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width,user-scalable=0">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">
    </head>
    <style type="text/css">
        .modals button{width:100%;margin:0 auto;height:auto;line-height:30px;border:1px solid #4185F3;color:#fff;font-size:14px;background:#4185F3;margin:0 auto}
        .modals-body{padding:30px 15px;font-size:10px;color:#666;text-align:center;background:#fff}
        .sliders{cursor:not-allowed;display:block;position:fixed;overflow:hidden;z-index:103;top:0;right:0;bottom:0;left:0;width:100%;height:100%;background:rgba(20,20,20,.8)}
        .modals{overflow-y:auto;max-height:95%;font-size:16px;z-index:103;border-radius:5px;background:#fff;width:50%;color:#333;display:block;box-shadow:0 0 3px rgba(0,0,0,.1);position:fixed;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}
    </style>

    <body>
        <!--一個未知寬高的彈出框，水平垂直居中-->
        <div class="sliders"></div>
        <div class="modals">
            <div class="modals-body">
                用戶信息丟失，請先登陸
            </div>
            <button class="btns">肯定</button>
        </div>
        <!--end-->
        <div class="list"></div>
    </body>
    <script src="build/zepto.min.js"></script>
    <script>

        for(var i = 0;i<=30;i++){
            $(".list").append("<p>BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB</p>");
        }

        //阻止防止滾動、縮放。
        $(".sliders,.modals").on("touchmove",function(event){
            event.preventDefault();
        }); 

        $(".btns").on("tap",function(){
            $(".sliders,.modals").remove();
        });

    </script>

</html>

解決方案2：經過 js 來作處理
首先，設置 body 元素 overflow:hidden 默認爲隱藏。java

body{overflow:hidden;}

其次，設置 JS ，再點擊按鈕以後，將body 的 overflow:initial 便可。web

<script>

    for(var i = 0;i<=30;i++){
        $(".list").append("<p>BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB</p>");
    }

    $(".btns").on("tap",function(){
        $(".sliders,.modals").remove();

        //關鍵代碼
        $("body").css("overflow-y","initial");

    });

</script>

解決方案3：採用第三方插件 fastclick.js 來作處理app

詳情查閱：http://amazeui.org/1.x/javascript/modal/ide

---------------------
做者：Rkatsiteli
來源：CSDN
原文：https://blog.csdn.net/qq_16559905/article/details/51333335
版權聲明：本文爲博主原創文章，轉載請附上博文連接！ui