Prevent Background Scrolling When Displaying Popup

Question

I have a form that is displayed in a popup. After loading, the background is grayed out, but the user can still scroll the background content up and down.

How do I prevent the background from scrolling?

Example here

the 'email this quote' link to the right of the pdf screenshot.

Solution 1

One option is to temporarily set the overflow property to hidden on body, that will get rid of the scroll bars but causes a small flicker when the page is adjusted.

The other choice is to tap onto the $(window).scroll() event and return false from there. That will also cause a bit of flicker as the browser doesn't react that fast to the return false statement.

Your best bet is to move your click event handlers to a separate file and do the binding there:

$(function() {
    $('.emailPost').click(function() {
        $(window).scroll(function() { return false; });
        pageTracker._trackPageview('/onclick/emailquote');            
    });
});

That should prevent a page from scrolling. Remember to remove the bind after the dialog closes, otherwise the page won't be scrollable anymore! You can remove binds using:

$(window).unbind('scroll');

Solution 2

To hide the scrollbar of the body when opening the popup

document.body.style.overflow = "hidden";

and to revert back when closing the popup

document.body.style.overflow = "visible";

Comments

[Tatu Ulmanen]

Absolutely do use the hash tag and do not in any case use inline JavaScript. To prevent the browser from redirecting to #, you can use return false; at the end of the handler function. crisp.tweakblogs.net/blog/313/…

[Joe]

Sorry, Rogier, that did not solve the issue. It also makes it so the page reloads which closes the popup. Thanks though!

[Roger Far]

Yeah, you still will have to use return false ofcourse! But that is really basic JS ;) <a href="" onclick="javascript: pageTracker._trackPageview('/onclick/emailquote');return false;" class="emailPost">Email this quote</a> Will work fine.

[Admin]

What about "javascript:void(0);"?

[Joe]

Thank you. But would this solution cause screen flickering? Also, the pageTracker is passed through a custom field set up in Wordpress, and would not be easy to interface with jQuery.

[BryanH]

Whatever is in the href is immaterial as the 'return false' prevents the browser from going to that address. Keep in mind that you are wasting bandwidth by putting in anything but the bare minimum -- some low traffic sites don't care about such things, obviously.

[Thomas]

Assigning overflow hidden will cause the scroll bar to disappear, thus changing the page width. This does not disable the scroll bar, though it does prevent scrolling from occurring.

[Thomas]

I have the same situation. This is a nice solution, as it does lock the scroll in FF24.0, but it still allows the page to move using end/home/pageup/pagedown; also, it does not appear to work in IE8. I haven't tested it further than those two browsers, but the above comment seems to show that this question needs some work.

[jondinham]

i like this solution :)

[Sunil Pachlangia]

Your solution works but when you close the Pop-up and again enable It scroll it is also giving horizontal scroll. Which is not required.

[Artjom B.]

I don't see how this answers the question. Is this supposed to be a comment to another answer?

[Jonny]

Just ran into this iOS problem but sadly this solution doesn't seem to work on iOS 11.x/JQuery Mobile 1.45