Question

我找到了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。

任何暗示都会受到赞赏。

干杯

Derion

Answer 1

你试过这个吗？

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

或者通过CSS：

body {
  overflow-y: scroll !important;
}

Answer 2

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

html,
body{
    overflow-y: auto;
}

使用blueimp灯箱

2 个答案: