while scrolling inner scrollbar page scrolls - html

Question

I have 3 divs with scrollbar. if we move one scrollbar and it reaches end of scrolling area page also scrolls.
I want to fix this issue.
Fiddle for it. http://jsfiddle.net/78h8e88x/2/
html, body {
height: 100%;
position:relative;
}
body
{
line-height:100px;
text-align:center;
}
.left
{
position:absolute;
margin-left:5%;
margin-top:3%;
display:block;
height:80%;
width:20%;
overflow:auto;
}
.center
{
position:absolute;
margin-left:25%;
margin-top:3%;
display:block;
height:80%;
width:50%;
overflow:auto;
}
.right
{
position:absolute;
margin-left:75%;
margin-top:3%;
display:block;
height:80%;
width:20%;
overflow:auto;
}
if we move one scrollbar and it reaches end of scrolling area page also scrolls.

Answer 1

The body element gets a margin of 8px by default (in Chrome at least). In the case of your fiddle this makes the content slightly bigger then the window and thus a scrollbar appears. Setting the margin to 0 on the body will remove this scrollbar. See jsfiddle: https://jsfiddle.net/vbvmLbmq/
That of course only fixes the scrolling behaviour in your fiddle which was a matter of window size. You can prevent scrolling on the html,body elements entirely by adding the overflow: hidden; css rule to them but keep in mind that would also hide any elements that flow past the height of those elements.
Continuing the scrolling of the page after a child elements scrolling has reached its end is browser application behaviour, which you cannot influence with javascript on your page.