CODEWITHSUNDEEP
jqueryhtmlcssscrollfancybox
Skan So
Skan So

Reputation: 153

Stopping scrolling behind fancybox

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.

Upvotes: 0

Views: 1741

Answers (2)

JFK
JFK

Reputation: 41143

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

Upvotes: 1

TreeTree
TreeTree

Reputation: 3230

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

Upvotes: 1

Related Questions