IsInViewport 不适用于 Ajax 无限滚动

Question

我一直在使用 isInViewport (https://github.com/zeusdeux/isInViewport) 将 .inView 添加到网格元素，因为它们进入视口并通过淡入/上滑过渡进入。

我正在尝试使用 Infinite Ajax Scroll (https://infiniteajaxscroll.com) 将站点切换为无限滚动，但 isInViewport 未注册任何新页面项目。有没有办法召回inView？

我一直在尝试将它添加到 IAS 的呈现事件中，但它似乎不起作用......

ias.on('rendered', function(items) {
    checkInView();
});

checkInView();是通过这个在滚动上正常调用的同一个函数...

$(document).on('scroll', checkInView);

指的是这个：

inView = $('.bodyText, img, iframe, video');
function checkInView() {
    var scrollTop = $(window).scrollTop() + tolerancePixel;
    var scrollBottom = $(window).scrollTop() + $(window).height() - tolerancePixel;

    inView.each(function(index, el) {
      var yTopMedia = $(this).offset().top;
      var yBottomMedia = $(this).height() + yTopMedia;

      if (scrollTop < yBottomMedia && scrollBottom > yTopMedia) {
        $(this).addClass('inView');
      } else {
        $(this).removeClass('inView');
      }
    });
  }

有什么想法吗？或者 IsInViewport 是否不适用于最初未加载到 DOM 中的项目？

Answer 1

想通了，很简单的解决方法。只需在 ias 渲染事件中刷新 inView 变量即可。

ias.on('rendered', function(items) {
    inView = $('.bodyText, img, iframe, video');
    checkInView();
});