使用 blueimp 灯箱后滚动条消失答案

【问题标题】：Scrollbars disappear after using blueimp lightbox使用 blueimp 灯箱后滚动条消失
【发布时间】：2016-11-30 20:18:40
【问题描述】：

我找到了 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>&nbsp;</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>&nbsp;</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;
}

也没有

options = {index: link, event: event, hidePageScrollbars: false},

确实有任何区别。有时再次加载灯箱并关闭它会使滚动条重新出现。重新加载页面会导致网站显示滚动条。

这个错误可能在 Chrome 和 Firefox 上产生，我没有使用和测试 IE。

任何提示将不胜感激。

干杯

迪翁

【问题讨论】：

标签： image scrollbar gallery blueimp

【解决方案1】：

你试过了吗？

<div id="blueimp-gallery" class="blueimp-gallery" data-hide-page-scrollbars="false">

或者通过 CSS：

body {
  overflow-y: scroll !important;
}

【讨论】：

【解决方案2】：

有同样的问题，对我有用的是：

html,
body{
    overflow-y: auto;
}

【讨论】：