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

Create you variabile with the API and the function: 🐝

var observer = new IntersectionObserver(handleIntersection);

Add the config: ✍️

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

var observer = new IntersectionObserver(handleIntersection, config);

Observe all the elements: 🧐

elements.forEach(element => observer.observe(element));

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!🧑‍💻

Comments

[Danny Engelman]

See the classList.toggle method