I am facing an issue with a fixed div on my webpage. When the height of the div exceeds the viewport height of the browser, I am unable to scroll within the div itself as the background scrolls instead (due to the position being fixed).
For example:
<div class="fixed">
</div>
.fixed {
position: fixed;
border: 1px solid #000;
width: 200px;
background-color: green;
}
You can see this behavior in action here. If you reduce the height of the preview page, you will notice that scrolling within the div is not possible.
The Bootstrap modal provides a solution to this issue, but the method they use is somewhat unclear. It appears that they disable scrolling on the body and introduce a spacer background div, but the exact process is not clearly outlined.
Take a look at the following example here. Even with minimal height available, the div remains scrollable.
How do they achieve this effect?