使用Fancybox 3与无限滚动时，动态加载内容的下一页按钮失效问题

AI 小北

2026-5-21

问题分析与解决方案

这个问题我之前也碰到过，核心原因其实是Fancybox 3的工作机制——它在初始化的时候会一次性把页面上所有匹配selector规则的元素都收集到自己的导航队列里，之后动态新加的内容它不会自动“察觉”到，所以翻页按钮自然找不到这些新图片啦。而你关闭弹窗重新打开时，Fancybox会重新扫描整个页面的元素，这时候新加载的图片已经在DOM里了，所以又能正常翻页。

要解决这个问题，关键是在无限滚动加载完新内容后，手动把新的图片元素添加到Fancybox的实例队列中，具体做法如下：

1. 监听无限滚动的内容加载完成事件

无限滚动有个append.infiniteScroll事件，会在新内容被添加到页面后触发，我们可以在这个事件里处理Fancybox的队列更新：

// 假设你的无限滚动初始化代码类似这样
var $infScroll = $('.gallery').infiniteScroll({
  path: '.pagination__next', // 你的下一页路径
  append: '.img-box', // 要添加的内容选择器
  // 其他无限滚动配置...
});

// 当新内容加载并添加到页面后，更新Fancybox的元素队列
$infScroll.on('append.infiniteScroll', function(event, response, path, items) {
  // 获取当前活跃的Fancybox实例
  var fancyboxInstance = $.fancybox.getInstance();
  
  // 如果Fancybox正处于打开状态，就把新加载的元素加入队列
  if (fancyboxInstance) {
    fancyboxInstance.addItems($(items));
  }
});

2. 确保Fancybox初始化正确

还要确认你的Fancybox初始化是在页面初始内容加载完成后执行的，比如放在$(document).ready()里：

$(document).ready(function() {
  $('.gallery').fancybox({
    selector: ".img-box",
    // 你的其他Fancybox配置
    afterShow: function(instance, item) {
      // 你原本的afterShow逻辑
    }
  });
});