100% fullscreen Colorbox (jquery lightbox) scroller does not replace or close the base layer scroller

Question

In the following paragraphs, I will talk about the problem of having two scroll bars next to each other when turning on the full-screen lightbox. Scroll bar for base layer (initial html) and scroll bar for iframe (lightboxes). I would like to remove or close the base scroll bar.

In my base page project, I have a vertical list of portfolio items in rows. The page is intended for scrolling. To view images of a portfolio element, the user clicks the link “view project images” to expand the lightbox, which expands 100% of the browser. The idea is to use the lightbox to center the portfolio images in a floating full-screen window, and when you close the window, the user returns to the page below, in the spot that they left. This is very important because the list of portfolio items below can be long. Colorbox is a basic iframe.

As mentioned earlier, I have a problem with two scrollbars next to each other. You can see the problem:

www.joshua-butler.com/sample/home.html

I would like to cover or remove the base scroll bar.

Here is a similar problem: jquery: How can I reset the scroll bar of a document when adding a layer above the document? (I could not figure out how to use this for my purpose)

If anyone has a better solution for Colorbox or knows a simple fix, let me know.

All lightbox problems like Thickbox, Shadowbox and Lightbox have this problem.

Thanks in advance! Josh

Answer 1

You can use the ColorBox onLoad and onClosed callbacks to change the overflow page to hide (remove page scrollbars) when the ColorBox is active.

 $(".iframe").colorbox({ iframe:true, width:"100%", height:"100%", onLoad:function() { $('html, body').css('overflow', 'hidden'); // page scrollbars off }, onClosed:function() { $('html, body').css('overflow', ''); // page scrollbars on } });