Question

我正在将Ekko灯箱插件用于模态画廊。当我单击上一个/下一个按钮时，加载下一张图像时会出现一个垂直滚动条。虽然只有片刻，但很快消失了。

这不是规则的，而是恒定的。这意味着我现在有两个缩小的图像。通过周围的图像的下一个/上一个按钮到达第一幅图像时，滚动条会出现在第一幅图像上。另一个图像则以相反的方式进行处理。通过下一个/上一个按钮到达周围图像时，会导致周围图像上出现滚动条。

.modal-open {overflow-y:hidden !important;}
也不能阻止这种情况的发生。
有人对此有解决方案吗？

$(document).on('click', '[data-toggle="lightbox"]', function(event) {
  event.preventDefault();
  $(this).ekkoLightbox()
});

.modal-content {
  border-radius: 0;
  background-color: transparent;
  border: none;
}

.ekko-lightbox-container img {
  border: 4px solid white;
}

.modal-open {
  overflow-y: hidden !important;
}

<section class="container tab-pane fade" role="tabpanel" id="editorial">
  <div class="row justify-content-center">
    <div class="col-sm-3 col-6 p-2">
      <a href="bg1.jpg" data-toggle="lightbox" data-gallery="img-gallery"><img src="thumb.jpg" alt="captiontext1" style="width:100%"></a>
    </div>

    <div class="col-sm-3 col-6 p-2">
      <a href="slide2.jpg" data-toggle="lightbox" data-gallery="img-gallery"><img src="thumb2.jpg" alt="captiontext2" style="width:100%"></a>
    </div>

    <div class="col-sm-3 col-6 p-2">
      <a href="slide3.jpg" data-toggle="lightbox" data-gallery="img-gallery"><img src="thumb.jpg" alt="captiontext3" style="width:100%"></a>
    </div>

    <div class="col-sm-3 col-6  p-2">
      <a href="slide2.jpg" data-toggle="lightbox" data-gallery="img-gallery"><img src="thumb2.jpg" alt="captiontext4" style="width:100%"></a>
    </div>
  </div>
</section>

Answer 1

                $current.removeClass('in show');
            setTimeout(function () {
                if (!_this2._$lightboxBodyTwo.hasClass('in')) _this2._$lightboxBodyTwo.empty();
                if (!_this2._$lightboxBodyOne.hasClass('in')) _this2._$lightboxBodyOne.empty();
            }, 0);

我在Github上发现了一个帖子，该帖子有类似的问题。我本来希望不必编辑JS文件，但是将此处的超时设置为零实际上可以避免弹出的滚动条。

Ekko-Lightbox的滚动条会暂时显示

1 个答案: