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

使用开放式模式

1 个答案: