[ACCEPTED]-Prevent Background Scrolling When Displaying Popup-popup

Accepted answer
Score: 31

To hide the scrollbar of the body when opening 2 the popup

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

and to revert back when closing 1 the popup

document.body.style.overflow = "visible";
Score: 17

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

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

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

$(function() {
    $('.emailPost').click(function() {
        $(window).scroll(function() { return false; });

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

Score: 0

Don't use the # tag in your links!

It will 4 try to to scroll to the anchor # but because 3 it's empty it will scroll to the top of 2 the page.

Edit your links to:

<a href="" onclick="javascript: pageTracker._trackPageview('/onclick/emailquote');" class="emailPost">Email this quote</a>

(notice the 1 href="")

Score: 0

This code block works for IOS mobile devices 1 where the scroll issue is very common.

$('body').on('touchmove', function(e) {
    if ($('.scroll-disable').has($(e.target)).length) e.preventDefault();
$('body').on('shown.bs.modal', function() {
$('body').on('hidden.bs.modal', function() {

More Related questions