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 Infinite Scroll一起使用

1 个答案: