Block 'body scroll' when the LightBox is open, but you can scroll the contents of the LightBox

Question

Block 'body scroll' when the LightBox is open, but you can scroll the contents of the LightBox

Navigation

#1 by (2 votes)

1

Forgive me if I'm wrong, because I do not know the exact name of the effect I'm looking for, I've seen such an effect on some pages over the Internet but at the moment I do not have any links that I can use as an example.

As described in the question, I'm looking for an effect that when clicking on a link / button, it will open a Lightbox and when this lightbox is enabled, the scroll of the page %) should be disabled and a new scroll will be added, which will represent scroll of open Lightbox content.

So if I touch scroll with Lightbox open, the content that will scroll will be Lightbox content, not page content, until the Ligthbox is closed or disabled!

Again, pardon me for lack of examples! The question is indeed very vague, but I hope you can help me.

javascript jquery rolamento lightbox

asked by anonymous 08.02.2016 / 01:26

1 answer

Centering div on an image How do I add a month to the current date with jquery

score 2 · Accepted Answer

A quick approach would be to create a class with overflow:hidden; responsible for taking scroll from body :

.lightbox-open {overflow:hidden;}

In which this will be added to the <body> tag and triggered / implemented via jQuery when the lightbox is also triggered. And for lightbox scroll , just give overflow:auto; to the element that contains lightbox content. In other words:

$('.dispara').click(function() {
    $('.overlay').show();
    $('body').addClass('lightbox-open');
});
$('.overlay').click(function() {
    $('.overlay').hide();
    $('body').removeClass('lightbox-open');
});

body{min-height:1500px;}
.lightbox-open{overflow:hidden;}

.overlay{
    display:none;
    overflow:auto;
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-color: rgba(0, 0, 0, 0.8);
}
.background-content {
    overflow: auto;
    padding-top: 45px;
    padding-left: 35px;
}
.dispara {
    cursor: pointer;
    background-color: #006FFF;
    color: #fff;
    padding: 4px 8px;
    border-radius: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script><spanclass="dispara">lança Lightbox</span>
<div class="overlay">
    <div class="overlay-content">
        <img src="http://lorempixel.com/400/200/city"/><imgsrc="http://lorempixel.com/400/200/fashion"/>
        <img src="http://lorempixel.com/400/200/nature"/></div></div><divclass="background-content">
    ... Corpo do site aqui ...
</div>