如何防止“通過”模式div滾動窗口/主體？

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

為了響應用戶的操作，我將通過設置display: block;顯示#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插件。 希望能幫助到你

Answer 2

Body應overflow-hidden並動態添加position: absolute; width: 100%; height: 100% position: absolute; width: 100%; height: 100% position: absolute; width: 100%; height: 100%模式打開時，正文中其他內容包裝器（主體內部的內容容器）的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>

在打開模態時動態添加此“ modal-open ”類，並在關閉時將其刪除。

Answer 3

由於您的modal-overlay覆蓋了100％的主體，因此我相信在顯示#modal-overlay時將position:fixed添加到body可以解決您的問題。

如何防止“通過”模式div滾動窗口/主體？

問題描述

3 個解決方案

解決方案1
1 2017-11-08 08:28:15

解決方案2
1 2017-11-08 08:51:25

解決方案3
0 2017-11-08 10:24:42

如何防止“通過”模式div滾動窗口/主體？

問題描述

3 個解決方案

解決方案1 1 2017-11-08 08:28:15

解決方案2 1 2017-11-08 08:51:25

解決方案3 0 2017-11-08 10:24:42

解決方案1
1 2017-11-08 08:28:15

解決方案2
1 2017-11-08 08:51:25

解決方案3
0 2017-11-08 10:24:42