make page stop scrolling when lightbox is active

Question

I have the following lightbox which includes a form. Everything works fine. My only problem is how to make the html page stop scrolling when the lightbox is active.

<a href = "javascript:void(0)" onclick="
  document.getElementById('light').style.display='block';
  document.getElementById('fade').style.display='block'">
<img src="img/add.jpg"/></a></p>
<div id="light" class="white_content">

<input name="degree_1" type="text" size="73"
   value="<?php echo $user_data_profile_education['degree_1'];?>"/>
</br></br>
Grade</br>
<input name="grade_1" type="text" size="73"
   value="<?php echo $user_data_profile_education['grade_1'];?>"/>

<a href = "javascript:void(0)" onclick="
  document.getElementById('light').style.display='none';
  document.getElementById('fade').style.display='none'"> 
</br><img src="img/done_editing.jpg"/> </a></div>
<div id="fade" class="black_overlay"></div>

and this is my css:

.black_overlay{
    display: none;
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 220%;
    background-color: grey;
    z-index:1001;
    -moz-opacity: 0.8;
    opacity:.80;
    filter: alpha(opacity=80);
}


.white_content {
    display: none;
    position: absolute;
    top: 45%;
    left: 30%;
    width: 32%;
    height: 51%;
    padding: 30px;
    padding-left:50px;
    border: 5px solid green;
    background-color: white;
    z-index:1002;
    overflow: auto;
}

see http://stackoverflow.com/questions/9280258/prevent-body-scrolling-but-allow-overlay-scrolling — Tamil Selvan C, Mar 31 '13 at 16:45
If you want the lightbox content to be stationary even with the scroll of pages, you can set the lightbox css to position: fixed; — Arunkumar Srisailapathi, Mar 31 '13 at 16:54

score 17 · Accepted Answer · answered Mar 31 '13 at 16:45

17

Add overflow: hidden to your body when you show the lightbox and overflow: auto when you hide it.

answered Mar 31 '13 at 16:45

Kaloyan

7,262
4
32
47

Add document.body.style.overflow='hidden' to the onclick event of the link that shows the lightbox and document.body.style.overflow='auto' to the onclick event of the link that hides it. – Kaloyan Mar 31 '13 at 17:03
Great answer, simple and effective, +1'd. – enigment Jul 19 '14 at 13:51
4

This causes the scrollbar to disappear while it's hidden, which widens the page slightly, reflowing text, so there's an ugly visual jump. – callum Sep 16 '15 at 12:10
3

This doesn't work on iOS. Setting `overflow: hidden` on the body does not stop it from scrolling. – evolutionxbox Mar 16 '16 at 12:23
Thank you so much! – user2812532 Apr 08 '20 at 21:35

score 0 · Answer 2 · answered Mar 27 '17 at 17:36

Use onLoad/onClose to change the css of the div that holds the page content

Setting .lb_overlay height is a nice touch, add the same "margin" from the top of the modal to the bottom so scrolling to the bottom doesn't just sit right at the bottom of the window

var modal = $("#modal"),
    wrapper = $("#wrapper")

$("#modalTrigger").click(function(){
    modal.lightbox_me({
        centered: true,
        onLoad : function(){
            wrapper.css({
                "position" : "fixed",
                "width" : "100%"
            })
            $(".lb_overlay").css("height" , parseInt($(window).height()) + parseInt(modal.css("top") ) + "px" )
        },
        onClose : function(){
            wrapper.css("position" , "relative")
        }
    })
})

Sergey Cherenkov · Answer 3 · 2021-03-16T19:16:06.047

0

If somebody still needs it, you can use lightbox events:

let lg = document.getElementById('lightgallery');

lg.addEventListener('onAfterOpen', function(e) {
    $("html, body").css("overflow","hidden");
}, false);

lightGallery(lg);

lg.addEventListener('onCloseAfter', function(e) {
    $("html, body").css("overflow","auto");
}, false);

lightGallery(lg);

edited Mar 16 '21 at 19:16

answered Mar 15 '21 at 15:37

Sergey Cherenkov

1
3

score -1 · Answer 4 · answered Dec 11 '18 at 15:45

-1

Just add this script to disable scrollign in lighbox

<script>
        lightbox.option({
    disableScrolling:true
    })
</script>

answered Dec 11 '18 at 15:45

Simran Malhotra

5
5

make page stop scrolling when lightbox is active

4 Answers4

Linked