Scrolling issue with CSS overflow: scroll HTML

Question

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

I have some div that have scrollbars.

What I want is when I use mouse scroll to stop scrolling when reach the end of the div and not to scroll the entire page.

What happens insted is that when i reach the end of the div the entire page starts to scroll.

I understand that this is browser driven, but is there some JS event that can handle this kind of situation & prevent scrolling the entire page as my cursor is over this div element.

EDIT:

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

SOLUTION

.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 link to the working jsFiddle: http://jsfiddle.net/BzYcZ/3/

Answer 1

you could use jQuery and freeze any scrollbars of the body/html

(by the way, jQuery is a Javascript library that makes coding easier and quicker: http://jquery.com/ )

Example:

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

UPDATE:

To keep the scrollbars and just disable them, follow this solution: Just disable scroll not hide it?

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

Updated Javascript here:

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

The extra CSS:

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