代码之家  ›  专栏  ›  技术社区  ›  chrscblls

IsinViewport不使用Ajax无限滚动

  •  0
  • chrscblls  · 技术社区  · 6 年前

    我一直在用isinviewport( https://github.com/zeusdeux/isInViewport )在网格元素进入视区时添加.inview,并使用淡入/向上滑动过渡输入。

    我尝试使用无限Ajax滚动将站点切换为无限滚动( 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 回复  |  直到 6 年前
        1
  •  0
  •   chrscblls    6 年前

    解决了,很简单。只需要刷新IAS呈现事件中的inview变量。

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