打开多个弹出窗口时如何防止背景滚动

Question

我有一个名为Products 的弹出窗口，当用户点击任何产品时，会打开一个包含product information 的新弹出窗口。使用此 CSS 打开弹出窗口时，我防止背景滚动：

body.modal-open {
  position: fixed;
}

当用户关闭弹出窗口时，我删除了这个position 属性，以便背景可以再次开始滚动。

问题是当我打开products 弹出窗口时背景停止滚动（这很好），然后当我打开product information 弹出窗口时背景仍然停止（这也很好）但是当用户关闭@ 987654327@又开始滚动了。

我希望它只有在两个弹出窗口都关闭时才开始滚动。我怎样才能做到这一点？

Answer 1

CSS样式属性overflow-y: hidden;如果应用于要删除滚动的 HTML 元素，则防止背景滚动。 在浏览器上尝试以下： a) 打开带有弹出窗口的页面。 b) 应用样式溢出-y：隐藏；在要删除滚动的元素上。滚动应该消失。 c）为了动态地实现这一点，您编写了 js 代码以在单击弹出触发器元素时将上述样式附加到所需元素上。只有 CSS 无法满足您的要求，因为您需要动态完成。