具有開放模式的背景滾動

Question

我煩了。 當在移動設備上打開模式時，真的很沮喪與背景滾動問題作斗爭。

---

情境
我在手機上打開了一個模式。
向主體添加.noScroll類，以防止背景滾動。 ,，當模式打開時，背景中的主體會滾動。 嘗試在模式上緩慢點擊/移動有時會開始在模式中滾動，這是理想的結果。

• 我需要身體保持姿勢，所以沒有positon: fixed或absolute
• 我有<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
• 我嘗試設置top: document.body.getBoundingClientRect().top+"px"即通過JS解決問題

代碼 ：

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; } 

對於手機，此問題似乎很常見。 雖然，在這一點上我處於痛苦和絕望之間。

幫助程序員–拯救生命

Answer 1

當您添加此類時，.noScroll嘗試在打開模式時添加此類時添加css

body.noScroll { overflow:hidden; }