CSS overflow scroll issue: HTML scroll

Question

Here is jsFiddle for a better understanding: http://jsfiddle.net/BzYcZ/

I have a div that have scrollbars.

I want when I use mouse scrolling to stop scrolling when we get to the end of the div, rather than scrolling the entire page.

What happens is that when I get to the end of the div, the whole page will start to scroll.

I understand that this is controlled by the browser, but is there some kind of JS event that can handle this situation and prevent the whole page from scrolling, since my cursor is above this div element.

EDIT:

I want to be able to scroll the entire page, but only when my mouse is outside this div.

Decision

.noscroll { position: fixed; overflow-y: scroll; width: 100%; } 

And here is the JavaScript part:

 $('.small_content').hover( function () { $('body').addClass('noscroll'); }, function () { $('body').removeClass('noscroll'); } ); 

Here is a link to working jsFiddle: http://jsfiddle.net/BzYcZ/3/

Answer 1

you can use jQuery and freeze any body / html scrollbars

(by the way, jQuery is a Javascript library that simplifies and speeds up coding: http://jquery.com/ )

Example:

 $('.yourdivclass').hover( function () { $('html, body').css("overflow", "hidden"); }, function () { $('html, body').css("overflow", "auto"); }); 

UPDATE

To save scrollbars and just turn them off, do the following: Just turn off the scrollbar, don't hide it?

Example here: http://jsfiddle.net/BzYcZ/2/

Updated Javascript here:

 $('.small_content').hover( function () { $('body').addClass('noscroll'); }, function () { $('body').removeClass('noscroll'); });​ 

Extra CSS:

 body.noscroll { position: fixed; overflow-y: scroll; width: 100%; } 

Answer 2

You can add the overflow:hidden property to the body if you do not want to scroll the body container at all, or you can use jQuery to freeze the body container scroll bar, as is done on Facebook.