javascript - 检查哪个 child 在视口(viewport)中？

Question

检查视口(viewport)中的哪个 child 后，我希望那个 child 获得一些类(class)(“child-animate”)，然后当下一个 child 进入视口(viewport)时，我想要下一步获取类(class)('child-animate')等等。

<div class="parent">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
</div>
<script>
$.fn.isInViewport = function() {
  var elementTop = $(this).offset().top;
  var elementBottom = (elementTop + $(this).outerHeight()) * .9;
  var viewportTop = $(window).scrollTop();
  var viewportBottom = (viewportTop + $(window).height()) * .75;

  return elementBottom > viewportTop && elementTop < viewportBottom;
};
</script>

我尝试过这样的事情:

if ($('.parent .child').isInViewport()) {
    $(this).addClass('child-animation');
}

Answer 1

就我个人而言，我会使用 IntersectionObserver。我创建了一个简单的版本，您可以在此处查看。

const children = document.querySelectorAll(".child");

observer = new IntersectionObserver( (entries, observer) => {
  entries.forEach (entry => {
    if (entry.intersectionRatio > 0) {
      // console.log(entry.target.innerHTML + " is visible");
      entry.target.classList.add("animate");
    } else {
      entry.target.classList.remove("animate");
    }
  });
});

children.forEach( child => {
  observer.observe(child);
});

.child {
  height: 120vh;
  background-color: #efefef;
  margin: 1em;
  opacity: 0;
}

.animate {
  animation: fade-in .5s ease-in-out forwards;
}

@keyframes fade-in {
  0% {
    opacity: 0;
    transform: translateY(25px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

<div class="parent">
    <div class="child">Child1</div>
    <div class="child">Child2</div>
    <div class="child">Child3</div>
    <div class="child">Child4</div>
</div>