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 (2)
Such a great tip, so much more efficient than checking the viewpoint every time the scroll even fires!
improved performance and with cleaner code.
no event handlers firering everywhere and each time you scroll up or down.