背景滚动打开模式

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

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

这个问题似乎是一个手机常见的一种。虽然在这一点上，我处于苦难和绝望之间。

帮助程序员 - 救人一命

Answer 1

当你加入这个类.noScroll尝试在CSS中添加，当你打开时态

body.noScroll { overflow:hidden; }