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'
      });  
    });

score 22 · Answer 1 · answered Feb 14 '13 at 17:48

22

Just add to options next code:

helpers:  {
    overlay: {
        locked: false
    }
}

answered Feb 14 '13 at 17:48

pheonix

221
2
2

1

imo, this is the real answer as well. we don't have to modify any of the underlying css! +1 – Alex Jun 19 '13 at 23:29
it helped BUT it allow to scroll background – user1954544 Oct 06 '14 at 20:44

score 12 · Answer 2 · answered Oct 02 '12 at 16:47

12

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; <-- 
}

answered Oct 02 '12 at 16:47

ajaykarwal

151
1
6

This doesn't fix the issue in firefox. It also INTRODUCES it in Safari. – knorthfield Jan 31 '13 at 17:23

score 5 · Accepted Answer · answered Mar 29 '12 at 11:41

5

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

answered Mar 29 '12 at 11:41

Jassi Oberoi

1,424
1
12
25

Good solution, thanks. Just a shame to have to modify the CSS with a function to fix a bug! – JayDee Mar 29 '12 at 12:14
1

I don't think is a bug (you would need to provide more elements before to make that statement). It should be your own page css settings (a floating element for instance) that when fancybox is appended to the `body`, it may create an extra gap in the body's height so the scroll bars appear. I have never seen that behavior so the workaround above is very specific. – JFK Mar 29 '12 at 17:52
This works for me, because I have the `overflow-y:scroll` property on html/body like OP probably did, but you can still see the 2nd scrollbar disappearing during the effect. It would be ideal to never have it appear at all. http://jsfiddle.net/NVHWw/ – RCNeil Feb 11 '13 at 18:58

score 3 · Answer 4 · answered Aug 27 '12 at 12:53

3

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

answered Aug 27 '12 at 12:53

Nix

5,746
4
30
51

1

this is probably what the OP was experiencing, as I was myself. I had `overflow-y:scroll` set up, so hence why it appeared twice. IMO, this should be the correct answer as it is most likely the root cause of the problem and should not be overlooked. – RCNeil Feb 11 '13 at 17:11

score 1 · Answer 5 · answered Jul 05 '12 at 02:28

1

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.

answered Jul 05 '12 at 02:28

Francis Kim

4,235
4
36
51

score 0 · Answer 6 · answered Sep 25 '12 at 11:07

In fancy box 2 most time shows scroll bar ,For avoiding this we have to set height and width of body which need to load in iframe,

ie,

<body style="height:300px;width:200px;overflow:hidden">
//body content come here
</body>

This is one method ,There more would be some other ways to solve this bug.

score 0 · Answer 7 · answered Jun 03 '14 at 15:49

0

Just try to add a margin. It helped me.

.fancybox-lock {
    overflow: hidden !important;
    width: auto;
    margin-right: 20px;
}

answered Jun 03 '14 at 15:49

Zanon Zealous

1

score -1 · Answer 8 · edited Oct 09 '12 at 11:03

In version: 2.1.1 I remove line between line 1743 - 1749. Bad way yes but work. ^_^

Change this:

if (obj.fixed && !isTouch) {
    if (obj.locked) {
        this.el.addClass('fancybox-lock');
        if (this.margin !== false) {
            $('body').css('margin-right', getScalar( this.margin ) + obj.scrollbarWidth);
        }
    }
} else {
    this.update();
}

To:

if (obj.fixed && !isTouch) {

} else {
    this.update();
}

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

8 Answers8

Linked