DEV Community

Cover image for Intersection Observer API - One Byte Explainer
Thea
Thea

Posted on

Intersection Observer API - One Byte Explainer

This is a submission for DEV Challenge v24.03.20, One Byte Explainer: Intersection Observer API.

Explainer

Intersection Observer API tracks when elements are visible on screen. Avoids expensive event handlers. Optimizes and stays responsive to viewport changes.

Compared to traditional scroll/resize event handlers, it is more efficient while being simpler to implement. Give it a try!

Additional Context

Check out this simple code snippet to implement it:

// Select the target element
const target = document.querySelector('.target');

// Create observer
const observer = new IntersectionObserver(entries => {
  entries.forEach(entry => {
    if(entry.isIntersecting) {
      // Element is visible
      console.log('Visible!');
    }
  });
});

// Observe target
observer.observe(target);

Enter fullscreen mode Exit fullscreen mode

Top comments (2)

Collapse
 
link2twenty profile image
Andrew Bone

Such a great tip, so much more efficient than checking the viewpoint every time the scroll even fires!

Collapse
 
kingdafiez profile image
Kadafi Blaze

improved performance and with cleaner code.
no event handlers firering everywhere and each time you scroll up or down.