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); 
Top comments (3)
Such a great tip, so much more efficient than checking the viewpoint every time the scroll even fires!
I was looking forward to learning it, but now I have, and thank you very much for the easy explanation.
improved performance and with cleaner code.
no event handlers firering everywhere and each time you scroll up or down.