[英]Background scrolling with open modal
I am frustrated. 我烦了。 Really frustrated fighting the issue of background scrolling when a modal is open on mobile.
当在移动设备上打开模式时,真的很沮丧与背景滚动问题作斗争。
.noScroll
class to the body in order to prevent background scrolling.
.noScroll
类,以防止背景滚动。
Alas, the body in the background scrolls when a modal is open.
positon: fixed
or absolute
positon: fixed
或absolute
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
top: document.body.getBoundingClientRect().top+"px"
ie resolving the issue via JS top: document.body.getBoundingClientRect().top+"px"
即通过JS解决问题 CODE : 代码 :
HTML HTML
<div id="galleryItem" class="modal_menu_item flexCenterX flexCenterY" style="display: flex;"> <div class="modal_overlay"></div> <div class="modal_food_inner flexParent flexColumn"> <span class="modal_close"><i class="fa fa-times" aria-hidden="true"></i></span> <div class="modal_food_info flexParent flexColumn flexCenterY"> <h2 class="modal_food_info_title noMargin noPadding text-center">Keema Samosa</h2> <hr> <p class="modal_food_info_body noMargin">Crisp pastry filled with minced lamb, potato and peas served with homemade chutneys</p> <hr class="optional" style="display: block;"> <span class="menu_food_item_priceContainer text-muted flexOne noPadding">€5.50</span></div> <img src="/pictures/55/vzrw5siuzogdeul8yaznqq4f.jpg" class="img-responsive modal_food_poster"></div> </div>
CSS CSS
body.noScroll {overflow: hidden;} .modal_menu_item { position: fixed; top: 0; left: 0; width: 100%; height: 100%; overflow-y: scroll; z-index: 9999999; -webkit-overflow-scrolling: touch; } .modal_overlay { background-color: rgba(0, 0, 0, .6); position: fixed; width: 100%; height: calc(100vh + 80px); top: 0; left: 0; bottom: 0; right: 0; } .modal_food_inner { position: absolute; top: 10%; left: 0; right: 0; margin: 0 auto; }
This issue seems a common one for mobiles. 对于手机,此问题似乎很常见。 Though, at this point I'm somewhere between misery and desperation.
虽然,在这一点上我处于痛苦和绝望之间。
Help a programmer – Save a life 帮助程序员–拯救生命
当您添加此类时,.noScroll尝试在打开模式时添加此类时添加css
body.noScroll { overflow:hidden; }
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.