CODEWITHSUNDEEP
jqueryscrollparent-child
Dylan Cross
Dylan Cross

Reputation: 5986

How to disable scroll for body, but not child element using jQuery?

I want to disable the body scroll when I have a popup div (for like a photo gallery viewer or such), however I don't want the scroll to be disabled for the child element.

I am using this right now, which disables all of the scrolls:

$('body').bind('mousewheel DOMMouseScroll', function(e) {
    var scrollTo = null;

    if (e.type == 'mousewheel') {
        scrollTo = (e.originalEvent.wheelDelta * -1);
    }
    else if (e.type == 'DOMMouseScroll') {
        scrollTo = 40 * e.originalEvent.detail;
    }

    if (scrollTo) {
        e.preventDefault();
        $(this).scrollTop(scrollTo + $(this).scrollTop());
    }
});

So if I have an element class named, "popup" how could I accept that? Or better yet, how could I stop the event from affecting anything other than the body tag?

Upvotes: 4

Views: 9621

Answers (2)

ordanj
ordanj

Reputation: 461

Try adding this to your child element 

onmouseover="document.body.style.overflow='hidden';" 
onmouseout="document.body.style.overflow='auto';"

It will make the body scrollbar disappear until mouseout on the child element, but has the desired effect otherwise.

Upvotes: 0

Huangism
Huangism

Reputation: 16438

You can take a look at this page

How to programmatically disable page scrolling with jQuery

I believe the person wants the same behavior, I have a feeling the Y scrollbar might disappear but maybe you can figure something out for it or just always display it

Upvotes: 0

Related Questions