Intersection Observer API 👀

or How NETFLIX does it

TIP

Intersection Observer API allows us to detect whether an element is visible within another element.
Most common usecase is to detect whether an element is inside the viewport.

Examples

Demo #1

Report when the target element is fully visible inside the box

Scroll down.. 👇

Scroll down.. 👇👇

Scroll up.. 👆

Scroll up.. 👆👆

Code

const rootElement = document.querySelector('.root')
const targetElement = document.querySelector('.target')

const callback = (entries) => {
  const [target] = entries
  if (target.isIntersecting) {
    // Is visible
  } else {
    // Is not visible
  }
}

const observer = new IntersectionObserver(callback, { root: rootElement })
observer.observe(targetElement)