How can I enable scrolling of the parent document while fancybox is opened?

Question

I want a fancybox to appear, but still be able to scroll up and down on the parent page.

Is there a way to do that?

My Fancybox definition:

// Fancy box to appear when user scrolls below video
            $(".fancybox").fancybox({
                autoSize:false,
                modal:false,
                width:400,
                height:'auto',
            });

Fancybox provides that functionality within its API, no need to override any CSS rules. See my answer — JFK, Jun 08 '16 at 01:08

A. Wolff · Accepted Answer · 2016-06-02T12:58:47.330

2

You would need to set as CSS rules to overwrite fancybox's ones:

html.fancybox-lock, html.fancybox-lock body {
    overflow: visible !important;
}

html.fancybox-lock body .fancybox-overlay{
    overflow: hidden !important;
}

edited Jun 02 '16 at 12:58

answered Jun 02 '16 at 12:32

A. Wolff

72,298
9
84
139

It hasn't helped. See here: http://info.fibia.dk/LP=259 (scroll at the bottom to see the popup). Thank you – Ondrej Tokar Jun 02 '16 at 12:47
@OndrejTokar Please try updated answer, including HTML element itself – A. Wolff Jun 02 '16 at 12:59
It works, I don't understand why setting overflow to visible has helped, but thank you. Feel free to explain it a little if you don't mind. +1 – Ondrej Tokar Jun 02 '16 at 13:08
1

This is because fancybox uses this [workaround](http://stackoverflow.com/a/12090055/1414562) to disable page scrolling. – A. Wolff Jun 02 '16 at 13:10

score 1 · Answer 2 · answered Jun 08 '16 at 01:07

1

Fancybox provides that functionality within its API, no need to override any CSS rules

Just add to your script the helpers option like

jQuery(document).ready(function($) {
  $(".fancybox").fancybox({
    // API options
    helpers: {
      overlay: {
        locked: false // allows to scroll the parent page
      }
    }
  }); // fancybox
}); // ready

DEMO

answered Jun 08 '16 at 01:07

JFK

40,294
31
126
295

Nice and neat answer. Thx – Ondrej Tokar Jun 08 '16 at 08:26

How can I enable scrolling of the parent document while fancybox is opened?

2 Answers2