CODEWITHSUNDEEP
cssgoogle-chromeopera
Samantha
Samantha

Reputation: 59

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.

Upvotes: 2

Views: 6617

Answers (2)

Naomi
Naomi

Reputation: 61

I had a similar issue with a fixed overlay (in this example .overlay) and an inner modal box. In my case, I could not get the overlay to scroll in Chrome using the JS above on either the .overlay or a wrapper parent.

What did work was using event.stopPropagation() with the scroll/touchmove/mousemove bound to the overlay itself, instead of a wrapper. My guess is that it would work on a wrapper too.

Upvotes: 2

Samantha
Samantha

Reputation: 59

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.

Upvotes: 3

Related Questions