Here is jsFiddle for better understanding: /

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: /

Here is jsFiddle for better understanding: http://jsfiddle/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/BzYcZ/3/

• javascript
• css
• scroll
• overflow

• 2 Personally this is a feature I like and use a lot. Not having it would annoy the crap out of me. – Bojangles Commented Aug 8, 2012 at 14:16
• Setting body{overflow: hidden} will prevent the page from scrolling. But, why not just have a contained height on the page so that there is no overflow to hide? – Joe Commented Aug 8, 2012 at 14:18
• @Joe I updated my question as I want to be able to scroll the body. Which means that some kind of JavaScript should be involved depending on the mouse position, disabling the body scroll ability. – Alex Kolarski Commented Aug 8, 2012 at 14:23

2 Answers 2

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./ )

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/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%;
}

You can add overflow:hidden property to body if you don't want to scroll body container at all, or you can use jQuery to freeze body container scrollbar, as it is done at Facebook.