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