当孩子与自己的重叠时，停止父 div 的滚动条（溢出）

Question

我有 3 个像这样嵌套的 div：

• 容器
  • 抽屉
    • 抽屉内容

我希望在视口空间受限时出现垂直滚动条。为此，我将样式 overflow-y: auto; 赋予容器 div 和抽屉内容 div。我希望这两个滚动条同时出现。

有一个动作可以打开抽屉，在它被触发之前，只有容器 div 是可见的，它的滚动条。打开抽屉后，抽屉和抽屉内容 div 覆盖容器，我希望容器的滚动条不存在，而只显示抽屉内容的滚动条。

此抽屉打开时的屏幕截图显示了问题。容器 div 有一个红色边框，抽屉有蓝色边框，抽屉内容有绿色边框。我希望容器 div 上的外部滚动条不要出现。

当然，如果在抽屉打开后出现视口限制，这不是问题。这是一个问题，在打开抽屉之前视口已经被限制，所以出现了Container div的滚动条，然后我们打开抽屉，抽屉和抽屉内容出现在顶部，但抽屉内容的滚动条应该是唯一的。

我创建额外滚动条的原因是因为这个容器在向下滚动主页时​​会粘在视口的顶部，因此内容可能变得不可访问，这是不可取的。

我有一个 Javascript 解决方案，但正在寻找一个 CSS 解决方案。

这是一个不准确但接近情况的小提琴。出于某种原因，滚动条目前只显示在 Windows 上。调查那个。 https://jsfiddle.net/8z49z1dj/5/

有什么想法吗？

谢谢！

Answer 1

在您的小提琴中，您在容器上明确设置了overflow-y，但您只需要在抽屉未打开时才需要它。 您可以在父级上添加一个额外的类来指示抽屉是否打开，如下所示：

document.getElementsByClassName("container")[0].className += " has-open-drawer";

然后，在您的 CSS 中，您可以像这样覆盖溢出行为：

.container.has-open-drawer {
    overflow-y: hidden;
}

请记住，如果用户能够关闭抽屉，您可能需要再次删除该类。

查看我的 fork 更改 here on JSFiddle。