如何禁用背景div暂时滚动，而前面的div仍然可以滚动？

Question

我有2div，一个在前面，一个在后面。只有按下按钮，前面才会弹出。如果没有显示前部div，则可以滚动背景div。相反，如果显示前div，则背景div滚动将被禁用。但是前部仍然可以滚动。

​

​

我已经尝试使用css通过应用无滚动css到背景div。

.no-scroll {
    position: fixed;
    overflow: hidden
}

但是每次我将无滚动类应用到元素中时，它都会反弹到顶部。

我还跟踪了this article

但是它禁用了整个窗口滚动以及字体div。有什么建议吗？

Answer 1

我认为您应该将div封装在一个容器中，并将其包含在相应的切换类中。就像这样

​

var btn = document.querySelector('button'),
    wrapper = document.querySelector('.wrapper');

btn.addEventListener('click', function(){
  wrapper.classList.toggle('modal-is-visible');
});

html, body { height: 100% }

.wrapper { 
  height: 500px;
  overflow: scroll;
  border: solid 2px black;
  padding: 2rem;
}

.lower_div {
  background: red;
  width: 100%;
  
  height: 600px;
  position: relative;
}


.modal {
  display: none;
  height: 20px;
  width: 100%;
  position: absolute;
  z-index: 2;
  background: tomato;
}

.modal-is-visible .modal { display: block;}

.modal-is-visible.wrapper { overflow: hidden; }

<button>
toggle
</button>
<div class="wrapper">
  <div class="lower_div">
    <div class="modal">
    </div>
  </div>
</div>

​

Answer 2

您可以尝试在事件“模糊”的背景div上添加一个事件侦听器，以触发样式更改，从而将“溢出:隐藏”样式放置在块上。

您也可以使用z索引来防止背景div返回到前面，只需将一个较高的z指数放到前面div，它应该是好的。