CODEWITHSUNDEEP
jquerycssfancybox
Packy
Packy

Reputation: 3573

Fancybox removing scroll, shifts page

When I click on a link that loads a Fancybox the whole background page shifts to the right do to fancy box removing the scroll bar. I have tried adding this JS as suggested in other forums but no luck. A link is below (click on a brand title), not sure why it would remove the scroll bar.

I load the object like

<div class="fancybox-hidden" style="display:none;">
                          <div id="post-<?php the_ID(); ?>" class="brand_list" style="width:800px !important;">
                            <h2>The Beers</h2>
                            <div class="beers">
                                <?php the_content(); ?>
                                <div class="clear"></div>
                            </div>
                          </div>
                        </div>

The Fix I tried

 <script type="text/javascript">
        $(".fancybox").fancybox({
        helpers: {
            title: {
                type: 'outside'
            },
            overlay: {
                locked: false
            }
        }
        }); 
        </script>

The Issue

Upvotes: 1

Views: 5586

Answers (4)

chrispie
chrispie

Reputation: 1

For people who use iframe with fancybox, this will put the scroll bar back on your main page

if ($( "body", window.parent.document ).hasClass( "compensate-for-scrollbar" ) ) {
   $( "body", window.parent.document ).removeClass( "compensate-for-scrollbar" );
}

Upvotes: 0

Pedro Henrique Cruz
Pedro Henrique Cruz

Reputation: 1

I had exactly the same problem. Here's what you need to do:

1) Launch Fancybox with this option:

helpers:{overlay: {css: {'overflow': hidden}}}

2) Add this line in any css file that executes after fancybox css

html.fancybox-lock {overflow-y: scroll !important}

That will make Fancybox to open and close without shifting your entire website AND won't affect the overflow of your html or body tag (it only sets 'overflow-y: scroll' when fancybox-lock class is present in the html tag)

Upvotes: 0

lex82
lex82

Reputation: 11317

As stated by BigMacAttack, the problem is the overflow: hidden style added to the <body> element. This removes the scrollbar from the body and prevents scrolling.

However, a solution that accepts the overflow: hidden is to compensate for the additional body width (due to the loss of the scrollbar) with an additional padding. Just save your body width before opening the overlay and add an additional padding when required.

// before opening
var originalWidth = $('body').width(); 

// when open
if ($('body').width() > originalWidth) {
    $('body').css("padding-right", ($('body').width() - originalWidth) +"px");
}

// after closing
$('body').css("padding-right", "");

Upvotes: 0

BigMacAttack
BigMacAttack

Reputation: 4549

The scrollbar is being removed because jquery.fancybox.pack.js is adding the property overflow: hidden; to the <body> element via the class .fancybox-lock whenever a fancybox is displayed. There are several ways you can handle this.

1) Modify the javascript in jquery.fancybox.pack.js to not add this class to the body element when a fancybox is displayed.
2) Modify the css in jquery.fancybox.css (line 169) to not add the overflow: hidden; property for the .fancybox-lock selector.
3) In one of your own css files, and the !important declaration to the overflow property on the body to override the fancybox css (i.e. body { overflow: auto !important; }).
4) Add the overflow: auto; as an inline style directly on the <body> tag.

Upvotes: 4

Related Questions