Background: Trying to resolve an issue mentioned here: https://github.com/likeastore/ngDialog/issues/94
Challenge: If you open this plnkr link: http://plnkr.co/edit/qKJiNwyivqJVCAtyhwYR?p=preview and attempt to hold and drag the scrollbar with the mouse, you'll notice that the scrollbar on the parent container is unresponsive. The issue seems to be caused by the position:fixed div.overlay overlapping with the scrollbar of its parent container.
HTML Structure:
<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 Styling:
.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;
}