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();
});

IsInViewport 不适用于 Ajax 无限滚动

IsInViewport not working with Ajax Infinite Scroll

ajax

jquery

viewport

infinite-scroll