Ekko-Lightbox has scrollbar appear momentarily

Question

I am using the Ekko lightbox plugin for a modal gallery. When I click the prev/next buttons a vertical scrollbar appears when the next image is loaded. It's only there for a moment though and disappears quickly.

This occurs on no regular, but constant pattern. This means I have two images right now that have been downsized. The scrollbars appear on the first image when reaching it via the next/prev buttons from surrounding images. Another image does it the other way around. It causes scrollbars on the surrounding images when reaching those via the next/prev buttons.

.modal-open {overflow-y:hidden !important;}
Does not prevent this from happening either.
Does anyone have a solution for this?

$(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>

score 0 · Answer 1 · answered Sep 28 '18 at 11:12

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

I found a post on Github that had a somewhat similar issue. I would have preferred not having to edit the JS file, but setting the timeout here to zero actually got rid of the scrollbar popping up.

Ekko-Lightbox has scrollbar appear momentarily

1 Answers1