От 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 был создан для решения подобных проблем, чтобы реагировать, когда элементы становятся видимыми или пересекаются друг с другом в области просмотра (или друг с другом).

Сначала вы определите параметры для ввода-вывода:

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

Если вам требуется поддержка старых браузеров, чем использовать этот (официальный) polyfill из w3 c, он воссоздает наблюдателя пересечения с прослушиванием событий прокрутки. Так что он будет работать медленнее в старых браузерах, с этим ничего не поделаешь. Но на более новых будет увеличение производительности.

Вот полный пример , как анимировать элемент после его прокрутки в поле зрения. (Прокрутите весь путь вниз, чтобы увидеть его в действии)