fancybox - how to scroll page when fancybox is focused

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.

can you point to a particular example, actually everything seems to work fine for me as it should be — defau1t, Dec 19 '11 at 18:51
for example the second example there "Inline - modal window". when i open it and place my mouse on the text inside the fancybox "Lorem ipsum dolor sit amet, consectetur adipiscing elit" and try to scroll the whole page via the trackpad, the page doesnt scroll. it´s kind of stuck. maybe it has something to do with me using a trackpad. — Björn, Dec 19 '11 at 22:06

score 7 · Answer 1 · answered Jan 19 '12 at 13:17

7

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

answered Jan 19 '12 at 13:17

vbulant

152
5

score 6 · Answer 2 · answered Jan 05 '12 at 19:24

6

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.

answered Jan 05 '12 at 19:24

ori

7,817
1
27
31

I'm triggering the mousewheel.fb event, but it's an artifical event, not the original one, so the code still works. – ori Jan 07 '12 at 19:44
I see. The concept is OK, but it doesn't work well, because of the `20px` padding at each side of the `#fancybox-wrap` element. +1 for the idea, though. – Rob W Jan 07 '12 at 20:22

score 3 · Accepted Answer · answered Jan 05 '12 at 15:22

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.

"_The creators of Fancybox disabled scrolling on Fancybox elements, without adding an option to customise this. Hence you have to manually edit the code._" .... well, that is not necessarily true. The function above is intended to interact with the jQuery mousewheel plugin. A good plugin will allow you to customize the options out of the original js file and you shouldn't edit the original file unless you want to extend it beyond its default features. — JFK, Jan 08 '12 at 06:00

score 2 · Answer 4 · edited Oct 26 '12 at 08:52

2

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

edited Oct 26 '12 at 08:52

Rathakrishnan Ramasamy

1,612
2
25
46

answered Oct 26 '12 at 08:30

dipo

33
4

score 2 · Answer 5 · answered Oct 09 '13 at 14:38

2

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

answered Oct 09 '13 at 14:38

Luis Amor

149
1
5

score 1 · Answer 6 · answered Jan 05 '12 at 21:43

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.

score 0 · Answer 7 · edited May 23 '17 at 11:47

0

Add the following to the plugin options:

helpers:  {
    overlay: {
      locked: false
    }
}

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

edited May 23 '17 at 11:47

Community

1
1

answered Feb 13 '14 at 02:15

Ethan Kawkji

217
2
9

score 0 · Answer 8 · answered May 27 '14 at 10:31

0

for fancyBox - jQuery Plugin version: 2.1.5

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

'onComplete' dosen't work!!!

answered May 27 '14 at 10:31

Vilas Kumkar

1,390
9
18

fancybox - how to scroll page when fancybox is focused

8 Answers8

Linked