背景滚动与开放模式

Background scrolling with open modal

本文关键字：模式 滚动 背景      更新时间：2023-09-26

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


我在手机上打开一个模态。
在正文中添加一个.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解决问题

:

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

这个问题似乎在手机上很常见。然而，在这一点上，我介于痛苦和绝望之间。

帮助程序员-拯救生命

当你添加这个类。noscroll尝试添加css当你添加这个类时，打开模式

body.noScroll { overflow:hidden; }

相关文章：