首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >Ekko-Lightbox会立即显示滚动条

Ekko-Lightbox会立即显示滚动条
EN

Stack Overflow用户
提问于 2018-09-27 17:41:44
回答 1查看 476关注 0票数 0

我正在使用Ekko lightbox插件来创建一个模式库。当我单击prev/next按钮时,在加载下一个图像时会出现一个垂直滚动条。不过,它只存在了一小段时间,很快就消失了。

这不是规则的,而是恒定的模式。这意味着我现在有两张图片被缩小了。当通过周围图像中的next/prev按钮到达第一个图像时,滚动条会出现在第一个图像上。另一个图像做了相反的事情。当通过next/prev按钮到达周围的图像时,它会在周围的图像上显示滚动条。

.modal-open {overflow-y:hidden !important;}

也不能阻止这种情况的发生。

有人有解决这个问题的办法吗?

代码语言:javascript
复制
$(document).on('click', '[data-toggle="lightbox"]', function(event) {
  event.preventDefault();
  $(this).ekkoLightbox()
});
代码语言:javascript
复制
.modal-content {
  border-radius: 0;
  background-color: transparent;
  border: none;
}

.ekko-lightbox-container img {
  border: 4px solid white;
}

.modal-open {
  overflow-y: hidden !important;
}
代码语言:javascript
复制
<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>

EN

回答 1

Stack Overflow用户

发布于 2018-09-28 19:12:29

代码语言:javascript
复制
                $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文件,但将此处的超时设置为零实际上可以消除弹出的滚动条。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/52533991

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档