Search code examples
fancyboxfancybox-3

Prevent vertical scrollbar from sliding with fancybox slides


I've encountered an issue where the browser's vertical scrollbar will, if visible, move along with a fancybox slide during the slide event. If you run the code snippet, adjust the height so that the vertical scrollbar becomes visible, and then click on the next/previous fancybox buttons to observe the sliding scrollbar behavior.

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>

Is this a bug? Any idea on a workaround? I tried hiding/showing the scrollbar before and after the slide transition, but this didn't work:

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

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

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

Solution

  • After a bit of tweaking I managed to find this solution, though I'm not sure of a better one, which involves accessing the actual slide's (and previous slide's) elements and hiding/showing their scrollbars via 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", "");
        }
    });