When a fancybox 2 is activated, a scrollbar flashes on the parent page causing the content to shift left and then back

Question

Any ideas how to work around the scrollbar issue? Whenever a fancybox is activated on my site it creates a scrollbar whilst initialising and then flashes away again - but this shifts the entire page over for a split second. Not very elegant!

Is this a bug with Fancybox 2?

Code used to activate Fancybox:

$('map > area.fancybox').click(function(e) {
      e.preventDefault();
      var url = $(this).attr('href');
       $.fancybox({
          'href' : url,
           closeBtn    : true,
           width    : '467',
           height    : '609',
           fitToView  : false,
           padding   : '5',
           openEffect  : 'none',
           closeEffect  : 'none'
      });  
    }); 

Answer 1

Just add to options next code:

helpers:  {
    overlay: {
        locked: false
    }
}

Answer 2

Edit the jquery.fancybox.css file in the following places

.fancybox-lock {
    overflow: hidden;
}

becomes

.fancybox-lock {
    overflow: hidden;
    margin-right:0 !important; <-- Add this
}

and

.fancybox-lock .fancybox-overlay {
    overflow: auto;
    overflow-y: scroll;
}

becomes

.fancybox-lock .fancybox-overlay {
    overflow: auto;
    overflow-y: auto; <-- 
}

Answer 3

when click to activate scroll bar just add the following code in your jQuery code

$("body").css("overflow","hidden"); // hide body scrollbar

and when close the fancybox add the following code

$("body").css("overflow","auto"); // show body scrollbar

Answer 4

Do you use html { overflow-y: scroll; }? This clashes with Fancybox. Fancybox adds a class to your body, called .fancybox-lock, which shifts the content 17px to the right.

The script removes scrollbars from "body" element (by applying "fancybox-lock" class) and then compensates them by adding margin to avoid content shifting.

You can override it like so:

.fancybox-lock { margin: 0 !important; }

Read more: https://github.com/fancyapps/fancyBox/issues/340

Answer 5

Make sure your Fancybox isn't being initialised twice. I've suffered years of pain and when I thought Fancybox 2 had bugs with AJAX windows, it was my fault for letting it initialise multiple times.