防止股利不其父格叠加滚动条

语境： 我试图解决一个问题，因为在这里提一下：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; 
}

来源

2015-09-23 Monish

我想你应该改变HTML是

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

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

来源

2015-09-23 09:33:48 ZyXEL

谢谢合勤。这是一个好主意，但如果可能的话，我需要用CSS来完成。 – Monish

[http://stackoverflow.com/questions/25639774/fixed-div-overlaps-scrollbar-of-static-div](http://stackoverflow.com/questions/25639774/fixed-div-overlaps-scrollbar-of -static-DIV）。我认为这与你的问题类似。它看起来像只能使用css无法完成。 – ZyXEL

防止股利不其父格叠加滚动条

回答

相关问题