javascript - Bootstrap 图片库始终在页面顶部打开

Question

我正在使用 Bootstrap image gallery by Blueimp .我已将其容器放在我的 Index.cshtml 页面的底部:

<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>
    <a class="play-pause"></a>
    <ol class="indicator"></ol>
</div>

这是一个链接到图库的示例 anchor 标记:

<a href="~/images/press/french/BABYBOOK-Couv-P-Ete-2014.png" 
  target="_blank" data-gallery="#blueimp-gallery">
  <img src="~/images/press/french/thumbs/BABYBOOK-Couv-P-Ete-2014.jpg" 
    class="img-responsive magazine" />
</a>

当您单击打开图库时，它会在页面顶部打开。我认为这些 CSS 规则控制着它的位置:

.blueimp-gallery {
  position: fixed;
  z-index: 999999;
  overflow: hidden;
  background: #000;
  background: rgba(0,0,0,.9);
  opacity: 0;
  display: none;
  direction: ltr;
  -ms-touch-action: none;
  touch-action: none;
}

.blueimp-gallery, .blueimp-gallery>.slides>.slide>.slide-content {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  -moz-backface-visibility: hidden;
}

position:fixed 和top:0, right:0, bottom:0, left:0 与始终在页面顶部打开的画廊有关。

有没有办法让图库在用户在页面上的位置打开，这样当他们关闭图库时，它会将他们返回到原来的位置？或者有没有办法知道用户在页面上的位置并在画廊关闭后将他/她返回到那个位置？

Answer 1

所有这些解决方案都像是变通办法，我在 blueimp-gallery 上遇到了同样的问题，最后我意识到这是因为库默认隐藏了页面滚动条，当你打开它时它会直接到顶部。

所以在选项中设置hidePageScrollbars:false

当你初始化库时:

blueimp.Gallery(links,{hidePageScrollbars:false});