Question

以下是我的布局的简化版本：

<body>
    [... a bunch of content ...]
    <div id="modal-overlay">
    </div>
</body>

body包含足以覆盖整个页面的内容。

#modal-overlay的样式如下：

#modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

为了响应用户操作，我将通过设置#modal-overlay

来显示display: block;

#modal-overlay然后填充整个视口。

这是麻烦......

当您在#modal-overlay上垂直滑动时，

有时， - 其内容会按原样滚动。

然而， 有时， 而body会滚动，#modal-overlay中的内容根本不会滚动。这就好像我正在body 滚动 #modal-overlay，这正是我不想要的。

事实上 - #modal-overlay或body在响应滑动手势时是否滚动似乎完全随机。

我已经阅读了一些黑客攻击（例如，将overflow:hidden应用于body但我不想这样做，因为它丢失了正确的滚动位置，并导致其他问题好吧。）我也希望有一个适用于任意数量的嵌套层的解决方案。我真的试图阻止滚动通过最上层，而不是摆弄底层。

这在iOS上尤其成问题，因为滚动body会降低浏览器镶边的高度，这会扩展视口，这会混淆#modal-overlay的布局，因为它的大小可以填充视口。 Aaargh。

提前感谢任何建议或指导！

Answer 1

我没有尝试在ios上实现这一点，但如果您正在处理多个图层并阻止其他图层的滚动，则至少可以尝试使用slimscroll jquery plugin。希望它有所帮助

Answer 2

Body应该是overflow-hidden和在模态打开时，将动态position: absolute; width: 100%; height: 100% CSS属性添加到正文中的其他内容包装器（正文内容容器）。

打开模态时

  <style>
   .modal-open {
     overflow: hidden;
   }

   .modal-open .container {
     position: absolute;
     width: 100%;
     height: 100%;
   }
  </style>

<body class="modal-open">

  <section class="container">
     Site content will be here
  </section>

  <div class="modal">
     Modal content will be here
  </div>

</body>

添加此＆＃34; modal-open＆＃34;打开模态时动态分类，并在关闭时将其删除。

Answer 3

由于您的modal-overlay 100％覆盖了正文，我相信当您展示position:fixed时，body会#modal-overlay添加firebase.database().ref(${path}/buy) .orderByChild('price').limitToFirst(1) .once('value') .then(snapshot => console.log(snapshot.val()))将解决您的问题。

如何防止滚动窗口/正文“通过”模态div？

3 个答案: