Css 停止父div'；子对象与滚动条重叠时的滚动条（溢出）'；他自己的

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

• 容器
  • 抽屉
    • 抽屉内容

我希望在视口空间受限时显示垂直滚动条。为此，我给出了样式

overflow-y:auto到容器div和抽屉内容div。我希望这两个滚动条同时出现，但不希望它们同时出现

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

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


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

我之所以创建额外的滚动条，是因为当向下滚动主页时，该容器会粘附在视口顶部，因此内容可能无法访问，这是不可取的

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

这把小提琴不准确，但很接近实际情况。由于某些原因，滚动条目前仅在Windows上显示。调查一下

有什么想法吗

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

document.getElementsByClassName（“容器”）[0].className+=“具有打开的抽屉”

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

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

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

查看带有更改的my fork。
是否可以将
溢出：隐藏设置为父对象，将
溢出：自动设置为子对象？当然，您需要为子级设置适当的维度，但这将解决您的问题父级（Container div）具有
overflow-x:hidden；overflow-y:auto
并且子级（抽屉内容div）具有
overflow-y:auto
您可以为您的类添加CSS吗？另外，当抽屉打开时，您是否向其中添加了新类？@hassankan-yes我将制作一个JSFIDLE。是的，我添加了一个类，它具有打开抽屉的转换。事实上，当抽屉打开时，容器中已经附加了一个has open drawer类，只要选择器是特定的，这应该可以工作，我们不需要添加新的javascript，只需利用现有的javascript。