javascript - Fancybox 插件和 $(window).scroll

Question

我正在使用 fancybox 插件，而没有按窗口高度调整图像大小。画廊图像是正确的分辨率，高度约为 800-2000 像素。所以用户应该滚动堆栈中的每张图片。为了更容易，我决定插入一个 scrollToTop 按钮。但它不起作用，因为fancybox 以某种方式阻止了滚动事件。我只是尝试通过执行以下操作重新创建滚动事件：

$(window).scroll(function() {
    alert('Scroll');
});

但它也没有奏效。

Answer 1

afterShow我猜你应该在fancybox( ) 回调中初始化你的scrollToTop 按钮，例如：

afterShow: function() {
    $("#scrollButtonID").on("click", function() {
        $(".fancybox-overlay").scrollTop(0); // or whatever value
    });
}

请注意，我们实际上不是定位，而是$(window)移动到 fancybox 叠加层的顶部$(".fancybox-overlay")

看到这个jsfiddle

在我的演示中，我将按钮设置为 fancybox 叠加层的附加元素，但您也可以将其设置为titlefancybox 的。为了更平滑的过渡，您可以animate使用滚动事件，但这是装饰性的；）

Answer 2

尝试与.on()绑定？

$(document).on('scroll', function() { 
    alert('Scroll....');
}); 

Answer 3

您也可以为此使用香草 javascript：

window.onscroll = function () {
    alert('Scroll');
}

Answer 4

FancyBox - jQuery 插件版本：1.3.4 (11/11/2010)

从 1073 到 1083 的行，我禁用部分代码

 /*if ($.fn.mousewheel) {
        wrap.bind('mousewheel.fb', function(e, delta) {
            if (busy) {
                e.preventDefault();

            } else if ($(e.target).get(0).clientHeight == 0 || $(e.target).get(0).scrollHeight === $(e.target).get(0).clientHeight) {
                e.preventDefault();
                $.fancybox[ delta > 0 ? 'prev' : 'next']();
            }
        });
    }*/