当 child 与其自身重叠时，停止 parent div 的滚动条（溢出）

Question

我有 3 个 div 嵌套如下：

我希望在视口 space 受限时显示垂直滚动条。为此，我将样式 overflow-y: auto; 赋予容器 div 和 drawer-content div。我想要这两个滚动条，但不是让它们同时出现。

有一个打开抽屉的动作，在它被触发之前，只有容器 div 的滚动条可见。打开抽屉后，抽屉和drawer-content div覆盖容器，我希望容器的滚动条不存在，只出现drawer-content的滚动条。

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

当然，如果抽屉打开后出现视口限制，这就是 non-issue。在打开抽屉之前视口已经被限制了，所以出现了 Container div 的滚动条，然后我们打开抽屉和抽屉， drawer-content 出现在顶部，但是 drawer-content' s 滚动条应该是唯一的。

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

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

这里有一个fiddle，虽然不准确，但接近实际情况。由于某种原因，滚动条目前只显示在 Windows 上。调查那个。 https://jsfiddle.net/8z49z1dj/5/

有什么想法吗？

谢谢！

Answer 1

在您的 fiddle 中，您明确地在容器上设置了 overflow-y，但您只会在抽屉未打开时才需要这样做。您可以添加一个额外的 class 来指示抽屉是否打开，例如：

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

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

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

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

查看我的分支，其中包含更改 here on JSFiddle。

Stop parent div's scrollbar (overflow) when child overlaps with it's own