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/

Personally this is a feature I like and use a lot. Not having it would annoy the crap out of me. — Bojangles, Aug 08 '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 08 '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 08 '12 at 14:23

score 3 · Accepted Answer · edited May 23 '17 at 11:48

3

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

edited May 23 '17 at 11:48

Community

1
1

answered Aug 08 '12 at 14:16

jackJoe

10,664
8
45
62

Actualy I want to be able to scroll the body/html depending on where is my cursor is located – sensor Aug 08 '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 08 '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 08 '12 at 14:22
@sensor I found the solution in another question at SO. – jackJoe Aug 08 '12 at 14:33
Thanks, mate! This works great. I'll edit my question with the solution! – sensor Aug 08 '12 at 14:37

score 0 · Answer 2 · answered Aug 08 '12 at 14:18

0

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.

answered Aug 08 '12 at 14:18

Edward Ruchevits

5,928
11
45
83

Scrolling issue with CSS overflow: scroll HTML

2 Answers2