PagePiling.js определяет, отображаются ли элементы

Question

Я пытаюсь оживить текст, когда он появляется.Все работает хорошо, но когда я представляю pagepiling.js, моя функция определения того, видят ли мои элементы, возвращает false.Вот функция:

function elementInViewport(el) {
    var top    = el.offsetTop;
    var left   = el.offsetLeft;
    var width  = el.offsetWidth;
    var height = el.offsetHeight;

    while (el.offsetParent) {
        el = el.offsetParent;
        top += el.offsetTop;
        left += el.offsetLeft;
    }

    return (
        top < (window.pageYOffset + window.innerHeight) &&
        left < (window.pageXOffset + window.innerWidth) &&
        (top + height) > window.pageYOffset &&
        (left + width) > window.pageXOffset
    );
}

Есть идеи, что может быть не так?

Answer 1

Пожалуйста, проверьте, как использовать обратные вызовы pagePiling.js для таких, как afterLoad и onLeave.

Вы также можете проверить доступный пример в папке examples репозитория github.

Answer 2

Эта функция должна работать:

function isInView(el) {
  let bb = el.getBoundingClientRect();
  return bb.top <= window.innerHeight && bb.bottom >= 0
    && bb.left <= window.innerWidth && bb.right >= 0;
}

Вот демоверсия:

document.onscroll = function() {
  document.querySelector('.status').textContent = isInView(document.querySelector('.element')) ? 'IN' : 'OUT';
}

function isInView(el) {
  let bb = el.getBoundingClientRect();
  return bb.top <= window.innerHeight && bb.bottom >= 0
    && bb.left <= window.innerWidth && bb.right >= 0;
}

.before,
.element,
.after {
  height: 200vh;
  background: wheat;
}
.element {
  background: teal;
}
.status {
  position: fixed;
  top: 20px;
  right: 20px;
  padding: 1em;
  background: silver;
}

<div class="before">Before</div>
<div class="element">Element</div>
<div class="after">After</div>
<div class="status">...</div>