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

Question

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

Answer 1

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.

Answer 2

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.

Answer 3

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

Answer 4

Sounds a bit wierd. an ugly solution is to use css, overflow:hidden;

Whenever I use fancybox, the scrollbars work correctly. sure that the content oc the fancybox is not setting another height?

Edit: Viewed your example-site. Seems like there is some width beeing set in the content that is larger than the fancybox itself.

Answer 5

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>

Answer 6

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.