Prevent Background Scrolling When Displaying Popup

html, jquery, popup

Solution

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');

Problem

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.

Original source