javascript - 从 jQuery 到 Javascript - 滚动动画

Question

我想知道如何从 jQuery 中的这段代码传递到纯 Javascript

$('.revealedBox').each(function() {
  if ($(window).scrollTop() + $(window).height() > $(this).offset().top + $(this).outerHeight()) {
    $(this).addClass('revealedBox-in');
  }
});

$(window).scroll(function() {
  $('.revealedBox').each(function() {
    if ($(window).scrollTop() + $(window).height() > $(this).offset().top) {
      $(this).addClass('revealedBox-in');
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

该代码用于当元素在屏幕上可见时运行动画。但是有几个元素带有 .revealedBox 类

我怎样才能用纯 Javascript 做同样的事情？

Answer 1

您不需要为此滚动事件，您可以使用 Intersection Observer API (IO) 来完成此操作。创建 IO 是为了解决像您这样的问题，当元素在视口(viewport)中变得可见或相互交叉(或相互交叉)时使用react。

首先，您需要定义 IO 的选项:

let options = {
  rootMargin: '0px',
  threshold: 1.0
}

定义选项后，您可以说出要观察的元素:

const elements = document.querySelectorAll('.revealedBox');

最后一步，您必须定义元素进入 View 后会发生什么并将其绑定(bind)到您定义的元素:

const intersectionObserver = new IntersectionObserver((entries, observer) => {
  entries.forEach((entry) => {

    // when element's is in viewport,
    // do something with it!
    if (entry.intersectionRatio > 0) {
      animate(entry.target); // example: call an "animate" function if you need to animate the element that's getting into view. 
      // Just do whatever you want with the element here
      console.log(entry.target); 
      // remove observer after animation (if it is no longer needed). 
      // remove this line if you want to continue observing this element.
      observer.unobserve(entry.target); 
    }
  });
});
elements.forEach((element) => intersectionObserver.observe(element));

如果您需要支持较旧的浏览器，请使用此(官方)polyfill from w3c ，它通过监听滚动事件重新创建交叉观察器。因此，在较旧的浏览器上它仍然会变慢，您对此无能为力。但在较新的产品上，性能将会有所提高。

这是 how to animate an element 的完整示例一旦你将其滚动到 View 中。 (一直向下滚动以查看其实际效果)