fancybox - how to scroll page when fancybox is focused

问题

go to: http://fancybox.net/ open any example (on bottom page)

when the mouse is hovered over the content inside the fancybox, the browser main window can´t be scrolled. when the mouse is anywhere else it works. i dont want this behavior. how would you fix this?

the page under the fancybox modal doenst scroll, when the mousecursor is inside the fancyboxmodal.

回答1:

Look in the source code of Fancybox, and replace the code marked by if ($.fn.mousewheel) {...} with the following (The fullly modified code can be found 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']();
            }
        });
    }

The creators of Fancybox disabled scrolling on Fancybox elements, without adding an option to customise this. Hence you have to manually edit the code.

回答2:

Well, the simplest solution is to add $('#fancybox-wrap').unbind('mousewheel.fb'); just after .fancybox() initialization.

回答3:

Indeed the bit of code Rob mentioned is the culprit. But instead of changing fancybox itself you can do something like this:

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

This would catch the wheel event on #fancybox-outer, and prevent the event from bubbling up to #fancybox-wrap.

So the default behaviour of scrolling will take place, but you can also trigger the blocked mousewheel event handler manually like I did.

回答4:

If you don't need ability to scroll images in gallery with mousewheel, then good solution is to add $('#fancybox-wrap').unbind('mousewheel.fb'); just after .fancybox() initialization as mentioned by vbulant

回答5:

In the fancybox options, you can do:

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

and then you can do mouse scroll in any box with overflow

回答6:

Marcel,

Don't get complicated. You don't have to mess with the fancybox js file at all. The function mentioned above has a purpose.

The reason the page behaves the way you described, is because it has loaded the jQuery mousewheel plugin, which is used to navigate through galleries inside fancybox using the mouse wheel.

If you don't load the mousewheel plugin (included with the download of fancybox), then you could scroll the parent page regardless you hover inside the content of fancybox or not. Of course, if you have galleries, then you have to use the arrows to navigate through them.

回答7:

Add the following to the plugin options:

helpers:  {
    overlay: {
      locked: false
    }
}

Thanks to pheonix for pointing this at https://stackoverflow.com/a/14880963/1655981

回答8:

for fancyBox - jQuery Plugin version: 2.1.5

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

'onComplete' dosen't work!!!

来源：https://stackoverflow.com/questions/8565843/fancybox-how-to-scroll-page-when-fancybox-is-focused

标签

jquery

scroll

fancybox