Colorbox Scrollbars

Question

I have an image that opens in a a lightbox (Colorbox is the script). When the image opens I added a CSS3 Animation. Works great but at first the lightbox has scrollbars which disappear once the animation is complete.

How do I prevent the lightbox from showing scrollbars at all?

Code:

#start{
  /* Width and Height of the Image */
  width:526px;
  height:450px;
}

<div class="hide">
<div id="start">
 <img src="/Images/designs/start-large.jpg" class="animated rollIn"> 
</div>
</div>

Solution 1

You could try to add overflow:hidden; to your CSS style of the div / img. Or try overflow:visible; if it cuts off something.

Solution 2

Set the colorbox setting scrolling to false to disable scrollbars on content.

Solution 3

#cboxLoadedContent{overflow:hidden !important;}

This is working for me.

Solution 4

You can use colorbox.resize() to automatic calculate its size or use overflow hidden to the parents of your content.
Both ways works.

Solution 5

Add scrolling: false

$.colorbox({
  inline:true, 
  width:'95%',
  scrolling: false // *********
});

View more solutions

Comments

[L84]

overflow:hidden works great! Note: overflow:visible does not fix the scrollbar issue.