CODEWITHSUNDEEP
jquerycssfancyboxfancybox-2
StudioTime
StudioTime

Reputation: 23989

Fancybox v2.1.3 double browser scrollbar

I have the following set in my stylesheet to ensure each page width essentially the same and therefore things don't move on 'short' pages: html { overflow-y:scroll; }

When using fancybox v2.1.3, to prevent double scrollbars on long fancybox iframe pages, I use the following:

$(".modal").fancybox({
            width   : '520',
            height  : 'auto',
            fitToView   : false,
            autoSize    : false,
            closeClick  : false,
            openEffect  : 'none',
            closeEffect : 'none',
            beforeShow: function(){
            $("html").css({'overflow-y':'hidden'});
            },
            afterClose: function(){
            $("html").css({'overflow-y':'visible'});
            },
            helpers : {
                overlay : {
                    css : {
                        'background' : 'rgba(255, 255, 255, 0.9)'
                    }
                }
            }
        });

Notice the following within the above which turns off the scrollbar while fancybox fired:

beforeShow: function(){
    $("html").css({'overflow-y':'hidden'});
},
afterClose: function(){
    $("html").css({'overflow-y':'visible'});
},

Which does the trick, kind of - the problem this then creates is that when Fancybox overlay opens, because i've hidden the overflow-y element, the whole background shifts to the right, then when i close the fancybox page it shifts back again as i'm turning the overflow-y back on. Not pretty.

I know there's a CSS change to stop this shift movement, but this is overwritten by the above beforeShow function:

body.fancybox-lock{
    overflow:visible !important;
    margin-right:auto !important;
}

you can't have both, or can you?

it seems I can either have a static background with fancybox pop ups, but with double scrollbar if long page, or single scrollbar but with shifting background

Is there a workaround for this?

Upvotes: 0

Views: 2549

Answers (2)

genux.wp
genux.wp

Reputation: 1

In your css, use:

body {overflow:scroll; overflow-x: auto; overflow-y: scroll; }

And not:

html body {overflow:scroll; overflow-x: auto; overflow-y: scroll; }

Upvotes: 0

Jonathan Nicol
Jonathan Nicol

Reputation: 3298

If I understand your problem correctly, you can disable Fancybox's overlay lock feature by adding the following option to your Fancybox config:

helpers : {
    overlay : {
        locked : false
    }
}

Then you can use html { overflow-y:scroll; } without any conflict.

The drawback is that the page will now scroll underneath the Fancybox overlay if the user e.g. scrolls their mousewheel.

Upvotes: 3

Related Questions