DEV Community

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

Posted on

9 2

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!πŸ§‘β€πŸ’»

SurveyJS custom survey software

JavaScript UI Libraries for Surveys and Forms

SurveyJS lets you build a JSON-based form management system that integrates with any backend, giving you full control over your data and no user limits. Includes support for custom question types, skip logic, integrated CCS editor, PDF export, real-time analytics & more.

Learn more

Top comments (1)

Collapse
 
dannyengelman profile image
Danny Engelman β€’

See the classList.toggle method

Image of Datadog

The Essential Toolkit for Front-end Developers

Take a user-centric approach to front-end monitoring that evolves alongside increasingly complex frameworks and single-page applications.

Get The Kit