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

1

Я пытаюсь оживить какой-то текст, когда они появятся. Все работает нормально, но когда я представляю 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
    );
}

Любые идеи о том, что может быть неправильным?

Теги:
pagepiling.js

2 ответа

0
Лучший ответ

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

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

  • 1
    Спасибо, довольно круто, что автор ответил здесь.
-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>
  • 0
    pagePiling.js не будет запускать событие прокрутки ...

Ещё вопросы

Сообщество Overcoder
Наверх
Меню