Problem Description:
Mobile when there is a fixed matte background and pop-up layer, sliding on the screen can slide the contents below the background, which is known as the rolling penetration problem.
Sample Demo:
Style:
<style>.box{width:100%;height:100%;p osition:relative;}. dialog{width:100%;height:100%;p Osition:fixed;left:0;top:0;background:rgba (0,0,0,0.4);}. Dia-con {WIDTH:40VW;HEIGHT:38VW;BACKGROUND:WHITE;MARGIN:30VH Auto;} </style>structure:
<body><p class= "box" ><!--there's so much text-- 1 Test text Test text Test text test type testing text Test text Test text Test text test type testing text Test text Test text Test text test Word testing text Test text Test text Test text test word test type Test text Test text Test text Test text tests text Test text Test text tests text test word test Text Test text Test text Test text testing word Test text test Word Test text Test text testing word Test text Test text Test text Test text testing word Test text Test text test word Test text Test text Test text Test text Test text Test text Test text Test text Test text testing word Test text Test text test words tests words tests words tests words Word Test text Test text test Word testing text Test text Test text Test text Test text testing word Test text Test text Test text Test text test type testing text Test text test word Test text Test text Test text Test text Test text Test text Test text Test text Test text tests text Test text test word testing word testing Word tests Text testing text Word Test text Test text test Word testing text Test text Test text Test Text 6 Test text Test text Test text test Word tests text Test text Test text Test text Test text Test text Test text Test text Test text Test text Test text Test text Test text testing Word testing text Test text test Text 8 Test text Test text test type testing text Test text Test text Test text Test text testing word Test text Test text Test text Test text Test text Test text Test text Test text Test text Test text Test text Test text Test text Test text Test text Test text Test text Test text test Text Test text Test text Test text testing word Test text test Word Test text Test text testing word Test text Test text Test text Test text testing word Test text Test text test word Test text Test text Test text Test text Test text Test text Test text Test text Test text testing word Test text Test text test words tests words tests words tests words Word Test text Test text test Word testing text Test text Test text Test text Test text testing word Test text Test text Test text Test text test Word testing text Test text Test text test word Test text Test text Test text Test text Test text Test text Test text Test text Test text tests type Test text Test text Test text Test text Test text testing word Test text Test text Test text Test text test word Test text testing Word Test text Test text Test text Test text Test text Test text Test text Test text Test text Test text Test text Test text Test text Test textTest text Test text Test text test Word testing text Test text Test text Test text Test text test type testing text Test text Test text Test text Test text Test text Test text Test text Test text Test text </p><p class= "dialog" ><p class= "Dia-con" >
Run the above code on your phone page: The "Test text" below slides when you swipe over a gray mask.
Solution One:
The default behavior for blocking top-level masks. Stop bubbling.
Sample 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;o Verflow: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;d isplay:block;box-shadow:0 0 3px Rgba (0,0,0,.1);p osition:fixed;top:50%;left:50%;-webkit-transform:translate ( -50%,-50%); Transform:translate ( -50%,-50%)}</style><body><!--An unknown wide-height pop-up box, horizontally vertically centered--><p class= "sliders" ></p><p class= "modals" ><p class= "Modals-body" > User information is missing, please login </p><button class= "btns" > OK </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>");} Prevents scrolling, zooming. $ (". Sliders,.modals"). On ("Touchmove", function (event) {Event.preventdefault ();}); $ (". Btns"). On ("click", Function () {$ (". Sliders,.modals"). Remove ();}); </script>Operating effect:
Solution Two:
First set the body's Overflow:hidden; This will not slide out of the part. When the mask disappears, set the body's overflow:initial, or set to scroll
Sample 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;d Isplay:block ; box-shadow:0 0 3px Rgba (0,0,0,.1);p osition:fixed;top:50%;left:50%;-webkit-transform:translate ( -50%,-50%); Transform:translate ( -50%,-50%)}</style><body><!--An unknown wide-height pop-up box, horizontally vertically centered--><p class= "sliders" ></p><p class= "modals" ><p class= "Modals-body" > User information is missing, please login </p><button class= "btns" > OK </button></p><!--end--> <p class= "list" ></p></body><script src= "./jquery.js" ></script><script>// Solution One://for (var i = 0;i<=30;i++) {// $ (". List"). Append ("<p>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</p >//}////prevent scrolling, zooming. $ (". Sliders,.modals"). On ("Touchmove", function (event) {// event.preventdefault ();/});//$ (". Btns"). On (" Click, function () {// $ (". Sliders,.modals"). Remove ();//});//Solution two: for (var i = 0;i<=30;i++) {$ (". List"). Append ("<p>BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB</p>");} $ (". Btns"). "Click", Function () {$ (". Sliders,.modals"). Remove ();//Key Code $ ("body"). CSS ("overflow-y", "initial");}); </script>Summarize:
The simplest solution:
Body{overflow:hidden;}This style can be added to the body to prevent sliding.
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
