Background scrolling with open modal

Question

I am frustrated. Really frustrated fighting the issue of background scrolling when a modal is open on mobile.

---

Scenario
I open a modal on mobile.
Add a .noScroll class to the body in order to prevent background scrolling. Alas, the body in the background scrolls when a modal is open. Trying to tap/move slowly on the modal sometimes starts the scrolling in the modal, which is the desired result.

• I need the body to stay in position, so no positon: fixed or absolute
• I have <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
• I have tried setting top: document.body.getBoundingClientRect().top+"px" ie resolving the issue via JS

CODE :

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

 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

Answer 1

当您添加此类时，.noScroll尝试在打开模式时添加此类时添加css

body.noScroll { overflow:hidden; }