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

Question

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?

i think perhaps you are disabling scrolling the wrong way. If I understand your question correctly. When your modal pops you want the body (everything under the model mask) to be unscrollable and you want the content of the modal to be scrollable? you can probably bind the event on the mask itself since it will cover the body. Although i don't think it's needed to disable body scroll. see http://www.toyota.ca/toyota/en/vehicles/camry/overview click the disclaimer link under the build/price button near the car image — Huangism, Oct 02 '12 at 13:00
That doesn't disable the scrolling either, the website doesn't have a scroll bar initially because it doesn't take up the entire page, but when I make my browser smaller it still scrolls. — Dylan Cross, Oct 02 '12 at 16:10
you are not getting my point, you are disabling scrolling by taking it out completely, on toyota.ca the background scrolls but it makes no difference since your mask is there and your primary content is the foreground. as I mentioned before if you want to take scroll out, then take it out on the mask and not the body. or use position fixed to disable scroll on the body. how would the children of body scroll anyway? unless you have a bunch of containers with scroll bars. Are you having an issue where when you mousescroll your modal content gets off screen because you scrolled? — Huangism, Oct 02 '12 at 16:29
No I know what you're saying, but what I am saying is that I want to keep the scrollbar there (so it doesn't change my contents width back and forth and cause an annoyance to the users), but disable the tag scrollbar from moving, I then have a scrollbar in the popup box that pop ups just about like the one on Toyata, overlays and everything, the problem is that sometimes when you scroll in that box, it scrolls on the body instead. I have tried binding it to the popup box however I get the wrong effect, it disables the popup box scroll, but not the body. I would like to only disable body — Dylan Cross, Oct 02 '12 at 17:19
ok so basically when the modal scrollbar reaches the bottom/top it will scroll the body and this is what you want to avoid. — Huangism, Oct 02 '12 at 18:10
Does this answer your question? [How to programmatically disable page scrolling with jQuery](https://stackoverflow.com/questions/3656592/how-to-programmatically-disable-page-scrolling-with-jquery) — Heretic Monkey, Aug 08 '23 at 02:24

score 0 · Answer 1 · edited May 23 '17 at 11:47

0

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

edited May 23 '17 at 11:47

Community

1
1

answered Oct 02 '12 at 18:11

Huangism

16,278
7
48
74

score 0 · Answer 2 · answered Oct 16 '13 at 16:14

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.

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

2 Answers2