CODEWITHSUNDEEP
javascriptjqueryhtmlcsspopup
AGE
AGE

Reputation: 3792

Prevent all elements from scrolling except a popup and its contents

I am trying to get the following behavior to occur: When the popup element is shown, I want to prevent any and all elements from scrolling unless they are the popup and the elements within it. The behavior currently is that when scrolling within the popup element, you will reach the bottom or the top and the rest of the document continues to scroll.

About the code:

The below jsFiddle contains what I have accomplished so far. My problem is certainly in 'how' to grab these elements that I need scroll prevention to occur upon.

Here is is: jsFiddle.

Your help is greatly appreciated!

Upvotes: 1

Views: 384

Answers (1)

abaracedo
abaracedo

Reputation: 1454

You can change the overflow of the body and do something like this:

// shows pop up
$("#showPopup").click(function () {

    $('body').css({
        overflow: 'hidden'
    });

    $(".popup").fadeToggle(500);
    $(".overlay").fadeToggle(500);
    // selects anything but the popUp and its children and 
    $('body > *:not(.popup)').css({
        "overflow-y": "hidden"
    });
});
// closes pop up
$(".closePopup").click(function () {

    $('body').css({
        overflow: 'auto'
    });

    $(".overlay").fadeToggle(500);
    $(".popup").fadeToggle(500);
    $('body > *:not(.popup)').css({
        "overflow-y": "scroll"
    });
});

Setting the overflow to hidden will hide the scroll bar when the pop up is shown. Then, when you close it you set the overflow to auto and then you can scroll the page.

Upvotes: 3

Related Questions