fancybox - how to scroll page when fancybox is foc

Question

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.

Answer 1

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.

Answer 2

for fancyBox - jQuery Plugin version: 2.1.5

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

'onComplete' dosen't work!!!

Answer 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.

Answer 4

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

Answer 5

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.

Answer 6

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