Block body scroll when Lightbox is open, but be able to scroll Lightbox content

Asked

Viewed 556 times

1

Forgive me if I’m wrong, because I don’t know the exact name of the effect I’m looking for, I’ve seen such an effect on some web pages but at the moment I don’t have any link I can use as an example.

As described in the question, I am looking for an effect that when clicking on a link/button, it will open a Lightbox and when activating this Lightbox, the scroll of the page (i.e. body) shall be deactivated and a new scroll will be added, which will represent the scroll the open content of Lightbox.

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

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

javascript jquery rolling lightbox

1 answer

2


A quick approach would be to create a class with overflow:hidden; responsible for removing the scroll of body:

.lightbox-open {overflow:hidden;}

Where this will be added to the tag <body> and triggered/implemented via jQuery when the lightbox is also triggered. And scroll from the lightbox just give a overflow:auto; to the element that contains the contents of the lightbox. 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>

<span class="dispara">lança Lightbox</span>
<div class="overlay">
    <div class="overlay-content">
        <img src="http://lorempixel.com/400/200/city"/>
        <img src="http://lorempixel.com/400/200/fashion"/>
        <img src="http://lorempixel.com/400/200/nature"/>
    </div>
</div>

<div class="background-content">
    ... Corpo do site aqui ...
</div>

  • A great way to do what I wanted!! I thank you in advance!

  • for a better positioning of the question! What name would you give that effect? Because it may be that other people will come to look for such a thing! And a more fitting title to the question might help!

  • I’ve already edited your question for a more convenient title, with more Keywords and more precise, both for OS search and for SEO searches like Google or other @ivanveloso :)

Browser other questions tagged javascript jquery rolling lightbox

You are not signed in. Login or sign up in order to post.