Question

我的模态视图的内容长于其边界，因此我设置了overflow-y: scroll。然而问题是模态视图位于身体的顶部并且还启用了滚动，因此当我尝试聚焦于模态视图并滚动时，它有时会抓住身体并滚动而不是模态。它似乎忽略了z-index值。

我是否可以使用任何jQuery来关注模态视图，并完全忽略它下面的任何内容？

这是html＆amp;模态div的css：

<div class="modal-window">
      <div class="modal-content">
        <div class="modal-image"></div>
        <ul class="modal-details">
          <li>Placeholder text</li>
          <li>Placeholder text</li>
          <li>Placeholder text</li>
          <li>Placeholder text</li>
          <li>Placeholder text</li>
        </ul>
      </div>
    </div>

.modal-window {
  position: fixed;
  z-index: 4;
  left: 50%;
  -webkit-transform: translate(-50%, 0);
  -ms-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
  top: 100px;
  width: 476px;
  height: 618px;
  border: 1px solid white;

}
.modal-content {
  position: relative;
  z-index: 4;
  height: inherit;
  width: inherit;
  overflow-y: scroll;
}

以下是展示此问题的视频：

https://s3.amazonaws.com/whatever12345/hggg.mov

你可以看到而不是只关注模态，它抓住下面的身体并滚动它，有些点甚至无视模态和与身体相互作用，我如何只关注模态当它的存在和完全无视下面的任何元素？

Answer 1

基本上，您一次只需要一个滚动条。

有几种方法可以做到。

您可以在模态打开时禁用正文滚动，方法是添加overflow：hidden;并且仅滚动模态容器。
另一种方法是通过使主体内容定位来删除主体内容：修复并让模态使用主体滚动（此方法有助于避免在第一种情况下通过添加和删除滚动发生的页面抖动）

如何使用jQuery正确关注位于另一个滚动div之上的滚动div？

1 个答案: