Question

What I want is, by default the browsers after is done scrolling a element, they just scroll the parent element

for example:

I have:

    <div id="main" style="height: 5000px; width: 700px; border: 2px solid black; float: left;">
    <div id="scroller" style="float: right; width: 200px; border: 2px solid black; overflow: auto; height: 60px; ">
               TEXTO<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />           
    </div>
</div>

If I place my mouse pointer in the div scroller and starts to scroll, when it reaches the bottom of the scroll (when theres nothing else to scroll) , it just starts to scroll the main div automatically. is there any way to not allow that?

Thank you.

Answer 1

Prevent the mouse wheel event from bubbling up to a parent that has a scroll bar.

To make sure the parent has no scroll bar, place both div’s adjacent to each other, as follows: see demo fiddle.