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

Comments

[Andrew Bone]

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

[Stanley-Orabueze]

I was looking forward to learning it, but now I have, and thank you very much for the easy explanation.

[Kadafi Blaze]

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