Scrolling issue with CSS overflow: scroll HTML

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/