javascript - 如何在前面的 div 仍然可以滚动的情况下临时禁用背景 div 滚动？

Question

我有 2 个 div，一个在前面，一个在后面。仅当按下按钮时，正面才会弹出。如果前面的 div 不显示，则可以滚动背景 div。相反，如果显示前面的 div，则将禁用背景 div 滚动。但是前面的 div 仍然可以滚动。

我尝试通过将无滚动 css 应用于背景 div 来使用 css。

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

但每次我对元素应用 no-scroll 类时，它都会弹回顶部。

我也关注了 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>