CODEWITHSUNDEEP
jqueryhtmlpopup
Joe
Joe

Reputation: 691

Prevent Background Scrolling When Displaying Popup

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.

Upvotes: 24

Views: 55879

Answers (6)

x-yuri
x-yuri

Reputation: 18853

The problem with the overflow: hidden solution is that it causes the page to flicker, because the page width changes when the scrollbar disappears. A solution? Fix the document width while displaying the popup:

document.body.style.width = document.body.clientWidth + 'px';

See this fiddle or gist.

Also I'm including my deleted Code Review question. It might be unnecessarily complex, especially these days (I wrote the code somewhere in 2010s). But it might contain solutions for further problems you might encounter. Although at the moment I see none.

Upvotes: 1

sudhansu63
sudhansu63

Reputation: 6180

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";

Upvotes: 31

Rajan Gupta
Rajan Gupta

Reputation: 35

If you are using it like this

<a href="#targetid">Open Model</a>

(#tragetid) is the div popup id.

You can use and replace href="" with data-mfp-src="". It's working perfectly.

Upvotes: -1

mkk
mkk

Reputation: 56

This code block works for IOS mobile devices 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() {
    $(this).addClass('scroll-disable');
});
$('body').on('hidden.bs.modal', function() {
    $(this).removeClass('scroll-disable');
});

Upvotes: 0

Tatu Ulmanen
Tatu Ulmanen

Reputation: 124768

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

Upvotes: 17

Roger Far
Roger Far

Reputation: 2385

Don't use the # tag in your links!

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

Edit your links to:

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

(notice the href="")

Upvotes: 0

Related Questions