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

Question

我有3个div嵌套如下：

• 容器
  • 抽屉
    • 抽屉内容

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

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

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

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

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

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

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

有什么想法吗？

谢谢！

Answer 1

在你的小提琴中，你明确地在容器上设置了PROTO GenericTrafficLight [ field SFVec3f translation 0 0 0 field SFRotation rotation 0 1 0 0 field SFBool startGreen TRUE field SFFloat greenTime 60 field SFFloat redTime 15 field SFString state "off" ] { %{ local greenTime = fields.greenTime.value if greenTime <= 0.0 then greenTime = fields.greenTime.defaultValue io.stderr:write("'greenTime' should be strictly positive.\n") io.stderr:write("'greenTime' was reset to '" .. greenTime .. "'.\n") end local redTime = fields.redTime.value if redTime <= 0.0 then redTime = fields.redTime.defaultValue io.stderr:write("'redTime' should be strictly positive.\n") io.stderr:write("'redTime' was reset to '" .. redTime .. "'.\n") end local controllerArgs = '"' .. redTime .. ' ' .. greenTime .. ' ' if fields.startGreen.value then controllerArgs = controllerArgs .. 'g' else controllerArgs = controllerArgs .. 'r' end controllerArgs = controllerArgs .. '"' }% Robot { translation IS translation rotation IS rotation children [ Pole { slot [ TrafficLight { lamp_geometry TrafficLightStandardLampGeometry { } } ] } ] controller "generic_traffic_light" controllerArgs %{= controllerArgs }% data IS state } } ，但是当抽屉没有打开时你只想要它。 您可以添加一个额外的类来指示父项上是否打开抽屉，如下所示：

overflow-y

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

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

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

使用更改here on JSFiddle查看我的前叉。