IsInViewport 不适用于 Ajax 无限滚动

Posted 2023-05-07

【中文标题】IsInViewport 不适用于 Ajax 无限滚动

【英文标题】：IsInViewport not working with Ajax Infinite Scroll

【发布时间】：2019-06-13 16:56:48

【问题描述】：

我一直在使用 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 中的项目？

【参考方案1】：

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

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