Just a quick question, but I have a large body that is scrollable, and inside that body I have several child divs that are also scrollable.
As I scroll through the body, sometimes my cursor will hit one of these child divs and get stuck scrolling that instead. It can be frustrating because I can only continue scrolling the parent body once I reach the end of the scrollable area in the child div.
Is there a way to prevent scrolling in the child div when I'm trying to scroll the parent body? If not, maybe there's a way to only allow scrolling in the child div when the mouse button is pressed inside it, otherwise the parent body should scroll.
For reference, here's an example of this behavior: JSFiddle
The positions are fixed using position: absolute
.area{
overflow:auto;
max-height:250px;
width:300px;
background:#000;
color:#FFF;
position: absolute;
bottom:0px;
}