Question

我遇到一个问题，固定的div会吞下父div的滚动，但整个页面的滚动仍然有效。

这可以在以下plunkr中看到： https://plnkr.co/edit/V1gbkrbhQduRFijlsrYz

较小的部分都可以滚动，但是当它们被点击时，会添加一个固定的div，覆盖该部分。这会停止该div内的滚动，但每个部分底部还有一个绝对定位的小段落。

即使应用了固定div，然后滚动绝对位置段仍会导致内部div滚动。

有没有人知道如何让固定div将滚动条传递给其父容器？

作为一个背景，这与一个模式相关，可以让内容超出模态并需要滚动，但是当在模态中打开菜单时，除非鼠标直接在菜单上，否则滚动会中断。那个傻瓜只是为了证明这个问题。

plunkr中的代码：

HTML：

<div class="container">
<p tabindex="1">
Lorem ipsum...
</p>
<div class="fixedOverlay"></div>
<p class="scrollableContent">I will let you scroll..</p>
</div>

CSS：

.container {
  position: relative;
  border: 1px solid;
  margin: 10px;
  width: 400px;
  max-height: 300px;
  overflow: auto;
}

p:focus + .fixedOverlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index:10;
}

p:focus {
  color: red;
}

.scrollableContent{
  position:absolute;
  margin: 10px;
  width: 100px;
  height: 100px;
  border: 1px solid;
  z-index:11;
}

修改只是为了澄清，我希望能够滚动，即使鼠标在主段落文本上，但是因为这将是一个角度指令我只能控制fixedOverlay和scrollableContent中的样式。

为了更深入地了解其原因，使用固定叠加层捕获用户点击菜单以便菜单关闭时

固定Div停止滚动内部div

0 个答案: