从jQuery到Javascript-滚动动画

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

$（'.revealedBox'）。每个（函数（）{
如果（$（窗口）.scrollTop（）+$（窗口）.height（）>$（此）.offset（）.top+$（此）.outerHeight（））{
$（this.addClass（'revealedBox-in'）；
}
});
$（窗口）。滚动（函数（）{
$（'.revealedBox'）。每个（函数（）{
如果（$（窗口）.scrollTop（）+$（窗口）.height（）>$（此）.offset（）.top）{
$（this.addClass（'revealedBox-in'）；
}
});
});
此操作不需要滚动事件，您可以使用。IO是为了解决像您这样的问题而创建的，当元素在视口中变得可见或相互交叉（或相互交叉）时，它会做出反应

首先，您要定义IO的选项：

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

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

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

作为最后一步，您必须定义元素进入视图后发生的情况，并将其绑定到您定义的元素：

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));

如果您需要支持比使用此（官方）更旧的浏览器，它将通过侦听滚动事件重新创建交叉点观察者。因此，在较旧的浏览器上，它仍然会变慢，在这里您无能为力。但在较新的设备上，性能会有所提高

这里是一个完整的例子，一旦你滚动到视图。（一直向下滚动查看它的运行情况）
看看。你是最棒的！！