IntersectionObserver instead of scroll

If you want to do something when the viewport reaches a certain element in the view, you would use a scroll event and check that the position of that element is equal to the viewport top position.

You can instead use the IntersectionObserver. You choose a root and target and when they cross path it calls the callback , when root is null then it uses the browser viewport.

const options = {
  root: null, // use browser viewport
  rootMargin: '0px',
  treshold: 0.0
}
const observer = new IntersectionObserver(callback, options)
const target = document.querySelectorAll('#item')
observer.observe(target)

Demo in codepen.