Stopping scrolling behind fancybox

Question

I have this website: http://thc-cup.ucoz.com/

And I used fancybox to add the login/contact us form in it without going to another page for that. BUT... after you click them and show up, if you scroll you will see that the page behind is scrolling too, which is annoying.

How can force it to stop scrolling while the fancybox is active?

EDIT

Code in website: *For contact form:

<div id="-cu" style="display: none;">$MFORM_1$</div>

*For the link which launches fancybox:

 <li><a class="fancybox" href="#-cu">Contact Us</a></li>

Thanks.

score 1 · Answer 1 · edited May 23 '17 at 11:58

Similar question to this Scrolling only the distance of a modal on smaller screens with media queries

The answer I gave was this. http://jsfiddle.net/mgGS7/1/

The fiddle has your webpage inside one div. So the header, content, and footer are inside a div. This would make the solution a lot easier.

<div class = "popup">
    <div class = "over"></div>
    <div class = "window">
        <button class = "close">Close</button>
    </div>
</div>

<div class = "content">
    <p>Filler</p>
    <button class = "pop">Popup</button>
    <p>Filler</p>
    <p>Filler</p>
    <button class = "pop">Popup</button>
    <p>Filler</p>
</div>

var scroll;

$('.pop').click (function () {
    scroll = $(document).scrollTop ();
    $('.popup').show ();
    $('.content').offset ({top:-scroll}).addClass ('paused');
});

$('.close').click (function () {
    $('.popup').hide ();
    $('.content').removeClass ('paused').removeAttr ('style');
    $(document).scrollTop (scroll);
});

Your webpage would be inside .content. Essentially when you click the popup, the webpage's scroll is saved and it becomes fixed at that position so it can't move. Once the popup goes away the it's no longer fixed and it's scroll position is restored.

This is one way of doing it. Another way would be to listen for the mouse wheel events and do some kind of logic there like e.preventDefault () or something. Here's a link on listening for mouse wheel events. JQuery / JS : Detect user's scroll attempt without any window overflow to scroll to

your answer is very detailed and looks good...but I'm a newbie in scripting and i really don't know how to apply this in my website. Would you mind helping me making your solution work? Please? I will update my question with code in my website. Thanks — Skan So, Nov 09 '13 at 16:17

score 1 · Answer 2 · answered Nov 09 '13 at 19:05

1

you need to set the overlay locked option to true like

$(".fancybox").fancybox({
    helpers : {
        overlay : {
            locked : true // false (page scrolls behind fancybox)
        }
    }
});

Check this JSFIDDLE

answered Nov 09 '13 at 19:05

JFK

40,963
31
133
306

i added it, but it doesn't work...jsfiddle works but not on my website: http://thc-cup.ucoz.com/ – Skan So Nov 10 '13 at 10:03
@SkanSo : you have two fancybox inits, but the second with the `helpers` is not wrapped in the `.ready()` method (as the first) so is not taken into account. – JFK Nov 10 '13 at 10:09
and how can I fix this please? – Skan So Nov 10 '13 at 12:23

Stopping scrolling behind fancybox

2 Answers2