[jquery] jQuery - Fancybox: But I don't want scrollbars!

I am using jQuery Fancybox for a popup registration form here

I would like the form to come up at the size of 450px by 700px but no matter what I set the height and width at I get scrollbars:

<script type="text/javascript">
    $(document).ready(function() {
        $("a#regForm").fancybox({
            'titleShow'  : false,
            'autoscale' : true,
            'width'  : '450',
            'height'  : '700',
            'transitionIn'  : 'elastic',
            'transitionOut' : 'elastic'
            }); 
        });
    </script>

There must be something I am doing wrong but I can't figure out what it is. I would appreciate a helpful hand here. Thanks.

Edit line 197 and 198 of jquery.fancybox.css:

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

I did this to get rid of the overflow (scrollbar) ...

by the end of the jquery.fancybox....js file there are onStart, onCancel, onComplete etc. functions, and they are all empty ... so just go ahead and fill into the curly brackets of onStart with "$('body').css('overflow','hidden')" and onClosed "$('body').css('overflow','visible')" ... should look like this ...

onStart:function(){$('body').css('overflow','hidden')},
onClosed:function(){$('body').css('overflow','visible')},

peace

The answers here offer many ways to potentially fix this issue, but most will not work for devices with touchscreens. I think the source of the problem stems from these lines of code from the source:

if (type === 'iframe' && isTouch) {
    coming.scrolling = 'scroll';
}

This seems to override any options set by the fancybox initial configuration, and can only be changed after these lines of code have run, i.e. changing the css using the afterShow method. However, all such methods will cause a noticeable delay/lag and you will be able to see the scrollbars disappear as you open it.

My suggested fix is that you remove these lines from the main source file jquery.fancybox.js around line 880, because I don't see a reason to force scrollbars onto devices with touchscreens.

Note that this won't immediately make the scrollbars disappear, it simply stops it from overriding the scrolling configuration option. So you should also add scrolling: 'no' to your fancybox initial configuration.

I know this sounds a bit weird but have any of you tried to set the margin of the form page body tag to 0.

The problem is actually pretty simple, the reason is that the body tag margin by default is set to 8px (depending on browser) and if you just set it to 0 then it fixes the scrollbar.

The js configuration I have is as follows and it works well without changing the css of fancybox.

$(".iframe").fancybox({
    'autoScale'         : false,
    'autoDimensions'    : false,
    'transitionIn'      : 'none',
    'transitionOut'     : 'none',
    'type'              : 'iframe'
});

I believe the solution to this is to set

'autoDimensions' : false

then the width and height for inline content would be as you set it to be

Fancybox 2.x at least has an "overlay helper" which turned out to be the key for me. I added the following to my fancybox configuration parameters:

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

I had tried setting this in the CSS, but that didn't work, and late in the game, such as on the beforeShow event, but that led to a flickering bar. This seems to work without a hitch.

I had a similar problem, with vertical scrollbars appearing when I set a maxWidth in the Fancybox options.

To get around the problem I had to set

.fancybox-inner {
   overflow: hidden !important;
}

and set a fixed width CSS rule on the Fancybox content rather than specifying a maxWidth in the Fancybox options. If I did the latter, Fancybox's calculated height for the content was slightly too small - probably hinting at why it was putting in scrollbars in the first place.

Using fancybox version: 2.1.5 and tried all of the different options suggest here and none of them worked still showing the scrollbar.

$('.foo').click(function(e){            
    $.fancybox({
        href: $(this).data('href'),
        type: 'iframe',
        scrolling: 'no',
        iframe : {
            scrolling : 'no'
        }
    });
    e.preventDefault();
});

So did some debugging in the code until I found this, so its overwriting all options I set and no way to overwrite this using the many options.

if (type === 'iframe' && isTouch) {
   coming.scrolling = 'scroll';
}

In the end the solutions was to use CSS !important hack.

.fancybox-inner {
   overflow: hidden !important;
}

The line of code responsible is:

current.inner.css('overflow', scrolling === 'yes' ? 'scroll' : (scrolling === 'no' ? 'hidden' : scrolling));

Fancybox used to be a reliable working solution now I am finding nothing but inconsistencies. Actually debating about downgrading now even after purchasing a developers license. More info here if you didn't realize you needed one for commercial project: https://stackoverflow.com/a/8837258/560287

You need to put the iframe option in it's own context eg:

$(".someclass").fancybox({
    type : 'iframe',
    iframe : {
        scrolling : 'no'
    }
});

Just wanted to say Magnus' answer above did it for me, but for the second "overlay" that needs to be "overflow"

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

$(".various").fancybox({
    fitToView   : false,
    width       : '100%',
    height      : '100%',
    maxWidth    : 850,
    maxHeight   : 550,    
    fitToView   : false,
    padding : 20,
    autoSize    : true,
    closeClick  : true,
    openEffect  : 'none',
    closeEffect : 'none',
    overflow : 'hidden', 

            scrolling   : 'no'
});

Remove the quotes around your height and width values:

<script type="text/javascript">
    $(document).ready(function() {
        $("a#regForm").fancybox({
            'titleShow'  : false,
            'autoscale' : true,
            'width'  : 450,
            'height'  : 700,
            'transitionIn'  : 'elastic',
            'transitionOut' : 'elastic'
            }); 
        });
    </script>

I had I guess the same issue. It wasnt what the fancybox properties or CSS was, but the main css for my site.

if you have something like

div {overflow:auto;height:auto;} 

for a inheritable/root in your site css then it will cause scroll bar issues in the fancy box. Remove and make your HTML and CSS more precise with IDs and classes

My 2 cents, write

*{ margin:0; padding:0; }

in your target page main css, add a content div with the height size of all your elements, don't touch the .js, listo, saludos

I have face the same problem and after times of trial and error, I found out that you can avoid scrollbars by overriding frame css class.

You can do like this:

iframe.fancybox-iframe {
    overflow:hidden;
}

JS configuration:

jQuery(document).ready(function(){
    $("a.various").fancybox({
        'width'             : 'auto',
        'height'            : 'auto',
        'autoScale'         : false,
        'autoDimensions'    : false,
        'scrolling'         : 'no',
        'transitionIn'      : 'none',
        'transitionOut'     : 'none',
        'type'              : 'iframe'  
    }); 
});

Note: Your fancybox box type must be an iframe for this to take effect.

This is the only thing that worked for me for both IE and Google Chrome, I think it's mostly because of the .body.scrollHeight stuff, which works in IE best. I put +30 for Firefox ...

jQuery.fancybox({
  href: href,
  type: "iframe",
  centerOnScroll: 'true',
  scrolling: 'no',
  width: 650,
  'onComplete': function() {
    jQuery('#fancybox-frame').load(function() {
      jQuery('#fancybox-content').height(this.contentWindow.document.body.scrollHeight + 30);
    });
  }
});

I had the same problem with fancybox and an iframe, googled for a solution and ended up here. The overflow: hidden did not work for me, however I found out that fancybox allows you to set the option for the iframe scrolling (equivalent to setting "scrolling=no" attribute on the iframe), which fixes the problem in IE7 in a more graceful manner:

$.fancybox({
    'type'        : 'iframe',
    'scrolling'   : 'no',
... and the rest of the parameters.

Add iframe: { scrolling : 'no' } as option

example

$.fancybox({
href: 'yourUrl.html',
width: 800,
height: 415,
autoSize: false,
type : 'iframe',
iframe: {
scrolling : 'no',
preload   : true
}});

after testing every of the above tips (and still having useless scrollbars caused by some inline overflow: scroll at .fancybox-inner) and also trying a lot of other own workarounds, i got rid of the scrollbars with this solution:

    afterShow: function(){
        this.inner.css({
            overflow: 'auto' // or 'no'
        });
    }

on jquery.fancybox.js, I edited this part:

iframe : {

    scrolling : 'no', // i changed this from 'auto' to 'no'
    preload   : true
},

Another alternative is to change the overflow:

body {
    overflow: hidden;
}

in your iframe's HTML.

I struggled quite a bit with this, only to find the answer within the Fancybox documentation.

As hinted above, first I thought it would have been as easy as this to disable scrolling:

$('.fancybox').fancybox({'type': 'iframe', 'scrolling': 'no', 'width': 500})

Just setting the 'scrolling' option to 'no' was not enough, though. I had to repeat the same thing in the 'iframe' option, like this:

$('.fancybox').fancybox({
  'type': 'iframe', 
  'scrolling': 'no', 
  'width': 500, 
  'iframe': {'scrolling': 'no'}
})

Here is another thought. I had

html {  overflow-y: scroll; }

in my main CSS to prevent a centered content well from jumping around between pages that did or did not require a scroll bar. I tried all of the above to get rid of the scrollbar in the popup until I realized this. Once I turned it off for the popup only, the scrollbar in the popup disappeared as well. So, make sure that the scroll bar you are seeing is actually coming from the iframe and not from the page inside.