Javascript 如何在仍然可以滚动前div的情况下禁用后台div scroll temporary？

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

我尝试过使用css，在后台div中不使用滚动css

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

但是每次我没有对元素应用scroll类时，它都会反弹到顶部

我也跟着

---

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

您可以尝试在事件“blur”的背景div中添加一个事件侦听器，以触发样式更改，从而将您的“overflow:hidden”样式置于块上

---

您还可以使用z索引来防止背景div返回到前面，只需将更高的z索引放到前面的div，这应该很好。

我认为您应该将这两个div包装在一个容器中，并在该容器上使用toggle类。像这样的

var btn=document.querySelector（'button'），
包装器=document.querySelector（'.wrapper'）；
btn.addEventListener（'click'，function（）{
wrapper.classList.toggle（'modal-is-visible'）；
});
html，正文{高度：100%}
.wrapper{
高度：500px；
溢出：滚动；
边框：纯色2px黑色；
填充：2rem；
}
.下分区{
背景：红色；
宽度：100%；
高度：600px；
位置：相对位置；
}
.莫代尔{
显示：无；
高度：20px；
宽度：100%；
位置：绝对位置；
z指数：2；
背景：番茄；
}
.modal可见。modal{display:block；}
.modal-is-visible.wrapper{overflow:hidden；}

切换
添加相关代码