100% Fullscreen Colorbox (jquery lightbox) scroller does not replace or cover scroller of base layer

Question

In the following paragraphs I present the problem of having two scrollbars next to each other when I engage a fullscreen lightbox. A scrollbar for the base layer (initial html) and a scrollbar for the iframe (lightbox). I'd like to remove or cover the base scrollbar.

On my base page design, I have a vertical list of portfolio items in rows. The page is meant to scroll. To look at images of a portfolio item, the user clicks the "view project images" link to expand a lightbox that extends 100% of the browser. The idea is to use the lightbox to center the portfolio images in a floating fullscreen window, and when you close the window, the user returns to the page beneath, in the spot they left. This is very important because the list of portfolio items beneath could be long. The Colorbox is a basic iframe.

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

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

I'd like to cover or remove the base scrollbar.

Here is a similar problem: jquery: How can I reset the document scrollbar when I append a layer over the document? (I couldn't figure out how to use this for my purpose)

If someone has a better solution to Colorbox, or knows a simple fix, please let me know.

All the lightbox solutions, such as Thickbox, Shadowbox & Lightbox all have this problem.

Thanks in advance! Josh

Answer 1

you can use ColorBox's onLoad and onClosed callbacks to change the page overflow to hidden (removing the page scrollbars) when 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
    }
});