angularjs - 防止 div 不在其父 div 上覆盖滚动条

Question

背景： 我正在尝试解决此处提到的问题：https ://github.com/likeastore/ngDialog/issues/94

问题： 打开 plnkr：http ://plnkr.co/edit/qKJiNwyivqJVCAtyhwYR?p=preview并尝试用鼠标按住并拖动滚动条。父容器上的滚动条不能用鼠标使用。顺便说一句，发生的事情是 position:fixed div.overlay 与其父容器的滚动条重叠。

HTML：

<div class="container">
  <div class="overlay"></div>
  <div class="content">
    <div>I'm large 1</div>
    <div>I'm large</div>
    <div>I'm large</div>
    <div>I'm large</div>
    <div>I'm large</div>
  </div>
</div>

CSS

.container{
    position: fixed;
    overflow: auto;
    z-index: 10000;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;  
    padding: 160px;
}

.container .overlay{
    position: fixed;
    background: rgba(0, 0, 0, 0.4);
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.container .content{
    background: #f0f0f0;
    border-radius: 5px;
    max-width: 100%;
    position: relative;
}

Answer 1

我认为您应该将 HTML 更改为

<div class="overlay"></div>
<div class="container">
  <div class="content">
  </div>
</div>
</div>

不要忘记更改css。 http://plnkr.co/edit/QsQBk5oJfWuCymBwUtYB?p=preview