javascript - 带有开放模式的背景滚动

Question

我很沮丧。当模式在移动设备上打开时，解决背景滚动问题真的很沮丧。

---

场景
我在手机上打开一个模式。
添加 .noScroll类到主体以防止背景滚动。 las，当模式打开时，背景中的主体会滚动。尝试在模式上缓慢点击/移动有时会在模式中开始滚动，这是期望的结果。

• 我需要 body 保持原位，所以没有 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 {
溢出:隐藏；
}