問題描述：
移動端當有 fixed 遮罩背景和彈出層時，在螢幕上滑動能夠滑動背景下面的內容，這就是著名的滾動穿透問題。
樣本demo：
樣式：
<style>.box{width: 100%;height: 100%;position: relative;}.dialog{width: 100%;height: 100%;position: fixed;left: 0;top: 0;background: rgba(0,0,0,0.4);}.dia-con {width: 40vw;height: 38vw;background: white;margin: 30vh auto;}</style>
結構：
<body><p class="box"><!-- 這裡有非常多的文字 -->1測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字2測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字4測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字5測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字6測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字7測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字8測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字</p><p class="dialog"><p class="dia-con"><h4>內容</h4><button>我知道了</button></p></p></body>
在手機頁面運行上面代碼： 在灰色的遮罩上滑動的時候 下面的 “測試文字” 也會跟著滑動。
解決方案一：
阻止頂層 遮罩的預設行為。阻止冒泡。
樣本demo：
<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><!--一個未知寬高的彈出框，水平垂直置中--><p class="sliders"></p><p class="modals"><p class="modals-body">使用者資訊丟失，請先登入</p><button class="btns">確定</button></p><!--end--><p class="list"></p></body><script src="./jquery.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("click",function(){$(".sliders,.modals").remove();});</script>
運行效果：
解決方案二：
首先設定 body 的overflow ： hidden; 這樣超出部分 就不會滑動。當 遮罩 消失時，在設定body的 overflow： initial； 或者設定為 scroll即可
樣本demo：
<style type="text/css">body{overflow:hidden;}.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><!--一個未知寬高的彈出框，水平垂直置中--><p class="sliders"></p><p class="modals"><p class="modals-body">使用者資訊丟失，請先登入</p><button class="btns">確定</button></p><!--end--><p class="list"></p></body><script src="./jquery.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("click",function(){// $(".sliders,.modals").remove();// });// 解決方案 二：for(var i = 0;i<=30;i++){$(".list").append("<p>BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB</p>");}$(".btns").on("click",function(){$(".sliders,.modals").remove();//關鍵代碼$("body").css("overflow-y","initial");});</script>
總結：
最簡單的解決方案：
body{overflow: hidden;}
在body上增加這個樣式即可禁止滑動。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
