Search code examples
cssgoogle-chromeopera

Preventing body scroll but allow lightbox overlay

I'm doing a lightbox and I want the overlay of the lightbox to be scrollable while preventing the body to scroll. Here is the effect I'm trying to achieve (on all browsers): http://jsfiddle.net/10py25fh/3/

Here is the relevant part of my code so far.

HTML:

<body class="noScroll">
    <div class="overlay">
        <div class="lightbox">
        /*** Lightbox content ***/
        </div>
    </div>
    /*** Lots of other content ***/
</body>

CSS:

.noScroll {
    overflow: hidden;
}    
.overlay{
    position: fixed;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 98;
    overflow: auto;
}
.lightbox {
    z-index: 99;
    position: relative;
}

This works find on IE and FF but doesn't work on Chrome and Opera. I notice that if the lightbox height is bigger than the window, it works find everywhere. But if the lightbox height is smaller than the window then the body keeps scrolling on Chrome and Opera but still works (don't scroll) on IE and FF.

Edit: wrong jsfiddle and typos.

Solution

  • This did the trick:

    First wrap the overlay in a container div (#container).

    Then add this:

        $('#container').on('scroll touchmove mousewheel', function (event) {
        event.preventDefault();
    });

    Combined with the overflow:hidden, works in safari, ie, ff, chrome and opera. Allows the overlay to be scrollable while the body remains "fix" with ligthboxes of every side.