固定Div停止滚动内部div

时间:2017-05-02 13:45:57

标签: html css

我遇到一个问题,固定的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中的样式。

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

0 个答案:

没有答案