移動頁面滾動穿透解決方案(薦)
阿新 • • 發佈:2019-02-08
移動頁面滾動穿透解決方法目前有多種解決方案,我介紹下幾種方案:
解決方案1:阻止冒泡。
//關鍵程式碼
$(".sliders,.modals").on("touchmove",function(event){
event.preventDefault();
});
全部程式碼附上:
<!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
預設為隱藏。
body{overflow:hidden;}
其次,設定 JS ,再點選按鈕之後,將body 的 overflow:initial
即可。
<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>