Question

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

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

但它也没有用。

Answer 1

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

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

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

请参阅 jsfiddle

在我的DEMO中，我将按钮设置为fancybox叠加层的附加元素，但您也可以将其设置为fancybox的title。为了更平滑的过渡，你可以animate滚动事件，但这是美化的;）

Answer 2

尝试与.on()绑定？

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

Answer 3

您也可以使用vanilla 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']();
            }
        });
    }*/

Fancybox插件和$（窗口）.scroll

4 个答案: