IsInViewport not working with Ajax Infinite Scroll

Question

I've been using isInViewport (https://github.com/zeusdeux/isInViewport) to add .inView to grid elements as they enter the viewport and enter with a fade in / slide up transition.

I'm trying to switch the site to be infinite scrolling using Infinite Ajax Scroll (https://infiniteajaxscroll.com), but isInViewport isn't registering for any of the new page items. Is there a way to recall inView?

What I've been trying is adding it into IAS's rendered event, but it doesn't seem to be working....

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

checkInView(); is the same function that's being called on scroll normally via this...

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

which refers to this:

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

Any ideas? Or does IsInViewport just not work for items not initially loaded into the DOM?

Answer 1

Figured it out, pretty simple solve. Just need to refresh the inView variable within the ias rendered event.

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