Question

I’m using the Fancybox JQuery plugin, but am coming across an issue because of my html and body CSS properties. Currently, the overflow-y property is set to scroll in an attempt to hide jittery animations that adjust the page’s length.

Because Fancybox is invoking a second HTML element (I think), a second scroll bar appears when it is called, which again, causes a jittery animation or effect.

I’m trying to use the beforeShow and beforeClose callbacks of Fancybox in order to fix this, and it seems to be effective in some regards.

The beforeShow callback works seamlessly, in that when Fancybox is called, no second scrollbar appears. The beforeClose callback, however, does work in a sense that the original scrolling properties are returned, but there is a small ‘blip’ that occurs causing the screen to jitter and all of the body’s elements to resize/reshape as if there was a second scrollbar to begin with.

I’m not sure why this is occurring, because technically there is no second scrollbar, but closing Fancybox acts as if there was. Are there CSS rules I can modify, or different callbacks to prevent this?

My Fancybox script:

 jQuery('.fancyboox').fancybox({
            fitToView   : false,
            width       : '90%',
            height      : '90%',
            autoSize    : false,
            closeClick  : false,
            openEffect  : 'none',
            closeEffect : 'none',
            beforeShow  : function() {
                $('body, html').css('overflowY','hidden');
            },
            afterClose   : function() {
                $('body, html').css('overflowY','auto');
            }
        });

A demo that emulates the same effect – http://jsfiddle.net/NVHWw/ – If you’ll notice, the second scrollbar appears then disappears very quickly upon closing the lightbox.

Many thanks, SO. Very appreciated.

Answer 1

Just add the helpers API option to disable the overlay lock like :

helpers: {
    overlay: {
        locked: false
    }
}

… no need of beforeShow and/or afterClose callbacks.

See JSFIDDLE