DEV Community

Cover image for Intersection Observer API: you need it!
Luca
Luca

Posted on

Intersection Observer API: you need it!

Hi Dev!🙋‍♂️

Today i want to talk you about the Intersection Observer API!
I'm in love whit this API, because it is simple to use and it is very usefully for your projects.

This is what you need:

Select you element: ☝️

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

Create a function and add/remove class when the element is visible or not inside the window: 📪📫

function handleIntersection(entries) {
  entries.forEach((entry) => {
     if (entry.isIntersecting) {
       entry.target.classList.add('visible')
     } else {
       entry.target.classList.remove('visible')
     }
  });
}
Enter fullscreen mode Exit fullscreen mode

Create you variabile with the API and the function: 🐝

var observer = new IntersectionObserver(handleIntersection);
Enter fullscreen mode Exit fullscreen mode

Add the config: ✍️

var config = {
  root:null,
  rootMargin: '0px',
  threshold: 0 
}

var observer = new IntersectionObserver(handleIntersection, config);
Enter fullscreen mode Exit fullscreen mode

Observe all the elements: 🧐

elements.forEach(element => observer.observe(element));
Enter fullscreen mode Exit fullscreen mode

Every time the target is near the window, the observe api look for the elements and add/remove the class (in this case .visibile).

Thank you for read!🧑‍💻

Discussion (1)

Collapse
dannyengelman profile image
Danny Engelman

See the classList.toggle method