停止父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; 
} 

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

看到我的叉与here on JSFiddle变化。