IsInViewport не работает с Ajax Infinite Scroll - PullRequest
0 голосов
/ 19 января 2019

Я использую 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 Ответ

0 голосов
/ 22 января 2019

Разобрался, довольно просто решить.Просто нужно обновить переменную inView внутри события ias.

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