防止垂直滚动条与花式框幻灯片一起滑动答案

【问题标题】：Prevent vertical scrollbar from sliding with fancybox slides防止垂直滚动条与花式框幻灯片一起滑动
【发布时间】：2017-03-24 21:35:35
【问题描述】：

我遇到了一个问题，即浏览器的垂直滚动条（如果可见）在幻灯片事件期间与花式框幻灯片一起移动。如果你运行代码sn -p，调整高度使垂直滚动条变得可见，然后点击下一个/上一个fancybox按钮观察滑动滚动条的行为。

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

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

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

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

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

【问题讨论】：

标签： fancybox fancybox-3

【解决方案1】：

经过一些调整后，我设法找到了这个解决方案，虽然我不确定是否有更好的解决方案，它涉及访问实际幻灯片（和上一张幻灯片）的元素并通过 CSS overflow 隐藏/显示它们的滚动条：

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

    beforeMove: function (instance, slide) {
        // Hide scrollbar for fancybox bug fix
        instance.slides[instance.prevIndex].$slide.css("overflow", "hidden");
        slide.$slide.css("overflow", "hidden");
    },

    afterMove: function (instance, slide) {
        // Restore scrollbar for fancybox bug fix
        instance.slides[instance.prevIndex].$slide.css("overflow", "");
        slide.$slide.css("overflow", "");
    }
});

【讨论】：

嘿，我在 fancybox 3.1.20 中找不到 afterMove ，他们删除了吗？当幻灯片向左或向右移动时，我需要做一些事情......有这个事件吗？任何想法将不胜感激:)
@awebartisan 查看official docs 中的“事件”部分。看起来此事件已被 afterShow 取代。