1

HTML

I have 2 divs One parent and another its child. Both has lots of contents. And because of that they have scrollbars. Now the observation we all have here is that when scrolling has reached to the bottom of child div then the parent contents starts scrolling. It is difficult to put in words. So I am linking a fiddle -

http://jsfiddle.net/JDkjh/

What I want is when I have finished scrolling child. i.e. scrollbars has reached to the bottom of child then I must be able to avoid scrolling of parents. When mouse is on child div and user scrolls then there must be no scenario when parent contents scrolls.

CSS solution must be well and good. But I hope there is no such. So if there is any js or jquery fix please let me know. Thanks.

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}
Ashwin
  • 10,619
  • 20
  • 75
  • 112

1 Answers1

0

For a pure CSS2 solution, make the child a sibling of the parent to prevent the scroll event from bubbling up to the parent, and ensure that the main browser window does not scroll.

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

<div id="wrapper">
    <div class="first">abc
    </div>
    <div class="second">xyz
    </div>
</div>
Community
  • 1
  • 1
NGLN
  • 41,230
  • 8
  • 102
  • 186