我正在使用Ekko lightbox插件来创建一个模式库。当我单击prev/next按钮时,在加载下一个图像时会出现一个垂直滚动条。不过,它只存在了一小段时间,很快就消失了。
这不是规则的,而是恒定的模式。这意味着我现在有两张图片被缩小了。当通过周围图像中的next/prev按钮到达第一个图像时,滚动条会出现在第一个图像上。另一个图像做了相反的事情。当通过next/prev按钮到达周围的图像时,它会在周围的图像上显示滚动条。
.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>
发布于 2018-09-28 19:12:29
$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文件,但将此处的超时设置为零实际上可以消除弹出的滚动条。
https://stackoverflow.com/questions/52533991
复制相似问题