使用fancybox幻灯片防止垂直滚动条滑动

时间:2017-03-24 21:35:36

标签: fancybox fancybox-3

我遇到了一个问题,即如果可见,浏览器的垂直滚动条会在幻灯片事件期间与幻灯片幻灯片一起移动。如果您运行代码段,请调整高度以使垂直滚动条变为可见,然后单击下一个/上一个fancybox按钮以观察滑动滚动条行为。

Screenshot of fancybox slide effect



$(".fancybox").fancybox({
    type: "inline",
    speed: 2000
});

<!DOCTYPE html>
<html lang="en">
<head>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.0.47/jquery.fancybox.min.css" rel="stylesheet" />
  <script src="https://code.jquery.com/jquery-3.2.1.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.0.47/jquery.fancybox.min.js"></script>
</head>
<body>
  <a class="fancybox" data-fancybox="modal" data-src="#modal" href="javascript:;">Inline Content 1</a><br>
  <a class="fancybox" data-fancybox="modal" data-src="#modal" href="javascript:;">Inline Content 2</a>

  <div id="modal" style="display: none; padding: 50px 5vw; max-width: 800px;text-align: center;">
    <h3>Login to Join The Community</h3>
    <p>This is a sample login form, but you may put any HTML here.</p>
  </div>
</body>
</html>
&#13;
&#13;
&#13;

这是一个错误吗?有关解决方法的任何想法?我尝试在幻灯片转换之前和之后隐藏/显示滚动条,但这不起作用:

$(".fancybox").fancybox({
    type: "inline",
    speed: 2000,

    beforeMove: function (instance, slide) {
        document.body.style.overflow = "hidden";
    },

    afterMove: function (instance, slide) {
        document.body.style.overflow = "";
    }
});

1 个答案:

答案 0 :(得分:0)

经过一些调整后,我设法找到了这个解决方案,虽然我不确定更好的解决方案,包括访问实际的幻灯片(以及之前的幻灯片)元素并通过CSS隐藏/显示他们的滚动条{{1} }:

overflow