当灯箱处于活动状态时，使页面停止滚动

Question

我有以下包含表单的灯箱。一切都正常工作。 我唯一的问题是如何在灯箱激活时阻止html页面滚动。

<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>    

这是我的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;
}

- 33528

---

请防止页面主体滚动，但允许覆盖层滚动。 - Tamil Selvan C

如果您希望灯箱内容即使在滚动页面时也保持静止不动，可以将灯箱CSS设置为position: fixed;。 - Arunkumar Srisailapathi

Answer 1

在展示灯箱时，将overflow属性设置为hidden，在隐藏灯箱时将其设置为auto。

- Kaloyan

---

将 document.body.style.overflow='hidden' 添加到显示灯箱的链接的 onclick 事件中，并将 document.body.style.overflow='auto' 添加到隐藏灯箱的链接的 onclick 事件中。 - Kaloyan

很棒的答案，简单而有效，点赞。 - enigment

当滚动条被隐藏时，页面会略微扩宽并重新排版文字，导致滚动条消失并出现不美观的视觉跳跃。 - callum

这在 iOS 上不起作用。在 body 上设置 overflow: hidden 不能阻止其滚动。 - evolutionxbox

非常感谢您！ - user2812532

Answer 2

如果有人仍然需要，您可以使用lightbox事件：

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);

- Sergey Cherenkov

Answer 3

使用onLoad/onClose来改变包含页面内容的div的css。

设置.lb_overlay的高度是一个不错的选择，将相同的“margin”从模态框的顶部添加到底部，这样滚动到底部时不会停留在窗口底部。

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")
        }
    })
})

- user3152459

Answer 4

只需添加此脚本以禁用灯箱中的滚动

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

- Simran Malhotra