Tell me more ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 5 down vote favorite

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/

share|improve this question
2  
Personally this is a feature I like and use a lot. Not having it would annoy the crap out of me. – Bojangles Aug 8 '12 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 Aug 8 '12 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. – sensor Aug 8 '12 at 14:23

2 Answers

up vote 3 down vote accepted

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%;
}
share|improve this answer
Actualy I want to be able to scroll the body/html depending on where is my cursor is located – sensor Aug 8 '12 at 14:16
@sensor I updated my answer with an example, it will hide the scrollbars of the html/body when you are hovering the div with the class yourdivclass – jackJoe Aug 8 '12 at 14:21
Thanks for your response! I already tried that but there is really bad flickering of the page, as the scrollbar for the entire page disappears when overflow:hidden is set. – sensor Aug 8 '12 at 14:22
@sensor I found the solution in another question at SO. – jackJoe Aug 8 '12 at 14:33
Thanks, mate! This works great. I'll edit my question with the solution! – sensor Aug 8 '12 at 14:37
up vote 0 down vote

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.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.