Scrolling child div should not scroll parent div

Question

HTML

I have 2 divs One parent and another child. Both have a lot of content. And because of this, they have scrollbars. Now the observation that we all have here is that when the scroll reaches the bottom of the child div, the parent content starts to scroll. Hard to put into words. So I bind the violin -

http://jsfiddle.net/JDkjh/

I want to finish scrolling the baby. that is, the scroll bars have reached the bottom of the child, then I should be able to avoid scrolling the parents. When the mouse is on child divs and custom scrolls, then there should be no script when scrolling through the contents of the parent.

CSS solution should be good and good. But I hope that there are none. Therefore, if there is any js or jquery fix, please let me know. Thank.

CSS code:

.first {width:300px; height:300px; border:1px solid #000; overflow:auto; position:fixed; text-align:center}
.second {width:100px; height:100%; position:absolute; top:0; right:0; border:1px solid blue; text-align:center; overflow:auto}

Answer 1

For a clean CSS2 solution, make the child parent the parent to prevent the scroll event from scrolling to the parent and make sure the main browser window does not scroll.

Then you can use this answer , which turns your script into this example script :

<div id="wrapper">
    <div class="first">abc
    </div>
    <div class="second">xyz
    </div>
</div>