使用blueimp lightbox后，滚动条消失
使用blueimp lightbox后，滚动条消失
提问于 2015-07-31 18:28:29
我找到了blueimp图片库，想把它和bootstrap一起使用。我偶然发现了一个问题，并将所有内容都简化为blueimp脚本。当我点击一张图片时，灯箱就会打开，我会时不时地滑动浏览图片，或者使用箭头滑动浏览图片，但滚动条并不总是消失。我试图尽可能地减少代码：
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1252">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div>
<div>
<div>
<div id="blueimp">
<div>
<div>
<a href="/core/5t/500/image_jpg/1500_1500/0409_57416_aw01_iso_kl.jpg" title="First Title" data-gallery>
<img src="/core/5t/500/image_jpg/425_425/0409_57416_aw01_iso_kl.jpg" width="425" height="425" alt="First Title">
</a>
</div>
<div>
<a href="/core/5t/500/image_jpg/1500_1500/0409_57416_aw02_iso_kl.jpg" title="Second Title" data-gallery>
<img src="/core/5t/500/image_jpg/160_160/0409_57416_aw02_iso_kl.jpg" width="160" height="160" alt="Second Title">
</a>
</div>
<div> </div>
<div>
<a href="/core/5t/500/image_jpg/1500_1500/0409_57421_aw01_iso_kl.jpg" title="Third Title" data-gallery>
<img src="/core/5t/500/image_jpg/160_160/0409_57421_aw01_iso_kl.jpg" width="160" height="160" alt="Third Title">
</a>
</div>
<div> </div>
</div>
</div>
</div>
</div>
</div>
<div id="blueimp-gallery" class="blueimp-gallery blueimp-gallery-controls">
<div class="slides"></div>
<h3 class="title"></h3>
<a class="prev">‹</a>
<a class="next">›</a>
<a class="close">×</a>
<ol class="indicator"></ol>
</div>
</body>
</html>
<link rel="stylesheet" href="/udx_lib/blueimp-gallery/2.16.0/css/blueimp-gallery.min.css">
<script src="/udx_lib/jquery/1.11.3/jquery-1.11.3.min.js"></script>
<script src="/udx_lib/blueimp-gallery/2.16.0/js/jquery.blueimp-gallery.min.js"></script>
<script>
document.getElementById('blueimp').onclick = function (event) {
event = event || window.event;
var target = event.target || event.srcElement,
link = target.src ? target.parentNode : target,
options = {index: link, event: event},
links = this.getElementsByTagName('a');
blueimp.Gallery(links, options);
};
</script>
我找到了这个post about overflow，还有关于hidePageScrollbars的信息。但两者都不是
body {
overflow-y: scroll;
}nor
options = {index: link, event: event, hidePageScrollbars: false},确实有什么不同。有时，再次加载lightbox并关闭它会让滚动条重新出现。重新加载页面将指向一个显示滚动条的站点。
这个错误可能是在Chrome和Firefox上产生的，我没有使用和测试IE。
任何提示都将不胜感激。
干杯
标准
回答 2
Stack Overflow用户
发布于 2015-10-20 18:25:49
你试过这个吗？
<div id="blueimp-gallery" class="blueimp-gallery" data-hide-page-scrollbars="false">或者通过CSS：
body {
overflow-y: scroll !important;
}Stack Overflow用户
发布于 2016-11-30 20:18:40
有同样的问题，对我有效的是：
html,
body{
overflow-y: auto;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/31743946
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号