Question

转到：http://fancybox.net/ 打开任何例子（在页面底部）

当鼠标悬停在fancybox内的内容上时，浏览器主窗口无法滚动。当鼠标在任何其他地方工作。我不想要这种行为。你怎么解决这个问题？

当鼠标光标位于fancyboxmodal内时，

fancybox模式下的页面滚动。

Answer 1

嗯，最简单的解决方案是添加$（'＃fancybox-wrap'）。unbind（'mousewheel.fb'）;就在.fancybox（）初始化之后。

Answer 2

确实，Rob提到的代码是罪魁祸首。但不是改变fancybox本身，你可以做这样的事情：

$('#fancybox-outer').mousewheel(function(event, delta) { 
  event.stopPropagation();
  $('#fancybox-wrap').trigger('mousewheel.fb', delta);
});

这将捕获#fancybox-outer上的滚轮事件，并防止事件冒泡到#fancybox-wrap。

因此会发生滚动的默认行为，但您也可以像我一样手动触发阻止的鼠标滚轮事件处理程序。

Answer 3

查看Fancybox的源代码，并将if ($.fn.mousewheel) {...}标记的代码替换为以下内容（可以找到完全修改后的代码here）。

    if ($.fn.mousewheel) {
        wrap.bind('mousewheel.fb', function(e, delta) {
            if (!busy && $(e.target).get(0).clientHeight == 0 || $(e.target).get(0).scrollHeight === $(e.target).get(0).clientHeight) {
                // Remove the next line too, if you want weird movements
                // at the image gallery example...
                e.preventDefault();
                $.fancybox[ delta > 0 ? 'prev' : 'next']();
            }
        });
    }

Fancybox的创建者禁止在Fancybox元素上滚动，而不添加自定义此选项的选项。因此，您必须手动编辑代码。

Answer 4

如果您不需要能够使用鼠标滚轮在图库中滚动图像，那么很好的解决方案就是在{strong> vbulant 后面的$('#fancybox-wrap').unbind('mousewheel.fb');初始化之后添加.fancybox() p>

Answer 5

在fancybox选项中，您可以执行以下操作：

onComplete: function(){
  $("#fancybox-wrap").unbind('mousewheel.fb');
}

然后你可以在任何带溢出的框中滚动鼠标

Answer 6

马塞尔，

不要变得复杂。您根本不必弄乱fancybox js文件。上述功能有一个目的。

页面的行为与您描述的方式相同，是因为它加载了jQuery mousewheel plugin，用于使用鼠标滚轮浏览内部 fancybox中的画廊。

如果您没有加载鼠标滚轮插件（随fancybox下载一起提供），那么您可以滚动父页面，无论您是否将鼠标悬停在fancybox的内容中。当然，如果你有画廊，那么你必须使用箭头来浏览它们。

Answer 7

将以下内容添加到插件选项中：

helpers:  {
    overlay: {
      locked: false
    }
}

感谢凤凰指出这一点 https://stackoverflow.com/a/14880963/1655981

Answer 8

for fancyBox - jQuery Plugin version：2.1.5

'afterShow': function () {
    $(".fancybox-wrap").unbind('mousewheel.fb');
},

'onComplete'不起作用!!!

fancybox - 如何在关注fancybox时滚动页面

8 个答案: