Question

我使用fancybox在其中添加登录/联系我们表单，而无需转到其他页面。但是......单击它们并显示后，如果滚动，您将看到后面的页面也滚动，这很烦人。

如何在fancybox处于活动状态时强制它停止滚动？

修改的

网站代码： *联系表格：

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

*对于启动fancybox的链接：

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

感谢。

Answer 1

与此Scrolling only the distance of a modal on smaller screens with media queries

类似的问题

我给出的答案是这个。 http://jsfiddle.net/mgGS7/1/

小提琴将您的网页放在一个div中。所以标题，内容和页脚都在div中。这将使解决方案变得更加容易。

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

您的网页将位于.content内。基本上当您单击弹出窗口时，网页的滚动会被保存，并且它会固定在该位置，因此无法移动。一旦弹出窗口消失，它就不再固定，它的滚动位置也会恢复。

这是一种做法。另一种方法是监听鼠标滚轮事件并在那里做某种逻辑，如e.preventDefault ()或其他东西。这是一个关于监听鼠标滚轮事件的链接。 JQuery / JS : Detect user's scroll attempt without any window overflow to scroll to

Answer 2

您需要将overlay locked选项设置为true

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

选中 JSFIDDLE

停止在fancybox后面滚动

2 个答案: