Javascript 在lightbox处于活动状态时使页面停止滚动
我有下面的灯箱,其中包括一个表单。一切正常。我唯一的问题是如何使html页面在lightbox处于活动状态时停止滚动Javascript 在lightbox处于活动状态时使页面停止滚动,javascript,html,css,Javascript,Html,Css,我有下面的灯箱,其中包括一个表单。一切正常。我唯一的问题是如何使html页面在lightbox处于活动状态时停止滚动 <a href = "javascript:void(0)" onclick=" document.getElementById('light').style.display='block'; document.getElementById('fade').style.display='block'"> <img src="img/add.jpg"/&g
<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>
添加溢出:在显示灯箱时隐藏到正文中,在隐藏灯箱时添加溢出:自动。使用onLoad/onClose更改保存页面内容的div的css 设置.lb_叠加高度是一个很好的方法,从模式的顶部到底部添加相同的“边距”,这样滚动到底部就不会仅仅停留在窗口的底部
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")
}
})
})
只需添加此脚本即可在lighbox中禁用scrollign
<script>
lightbox.option({
disableScrolling:true
})
</script>
lightbox.option({
禁用滚动:true
})
如果有人仍然需要它,您可以使用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);
查看您是否希望lightbox内容即使在页面滚动时也保持静止,您可以将lightbox css设置为position:fixed;将document.body.style.overflow='hidden'添加到显示lightbox的链接的onclick事件中,并将document.body.style.overflow='auto'添加到隐藏它的链接的onclick事件中。答案很好,简单有效,+1'd。这会导致滚动条在隐藏时消失,从而略微加宽页面,使文本回流,所以有一个丑陋的视觉跳跃。这在iOS上不起作用。在正文上设置
overflow:hidden
并不能阻止它滚动。非常感谢!
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);