CODEWITHSUNDEEP
javascriptcssscrolloverflow
Alex Kolarski
Alex Kolarski

Reputation: 3425

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/

Upvotes: 7

Views: 7737

Answers (2)

jackJoe
jackJoe

Reputation: 11148

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

Upvotes: 3

Edward Ruchevits
Edward Ruchevits

Reputation: 6696

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.

Upvotes: 0

Related Questions