javascript - 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。

您还可以查看github 存储库文件夹中的可用示例。examples

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>