Intersection Observer in JavaScript
From the DOM Manipulation cheat sheet · Modern DOM APIs · verified Jul 2026
Intersection Observer
Efficiently detect when elements enter or leave the viewport
javascript
// Create observer
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('visible')
}
})
})
// Observe elements
document.querySelectorAll('.lazy').forEach(el => {
observer.observe(el)
})
// Stop observing
observer.unobserve(element)
observer.disconnect()💡 More efficient than scroll event listeners
⚡ Great for lazy loading and animations
📌 Can observe multiple elements with one observer
✅ Always disconnect when done observing
Continue with DOM Manipulation
Save the full cheat sheet or work through every related task.