JS IntersectionObserver
In this page:
What Is IntersectionObserver?
IntersectionObserver detects when an element enters or leaves a visible area. It is useful for lazy loading and scroll effects. Unlike manually calculating element positions on every scroll event, IntersectionObserver runs asynchronously and efficiently without blocking the main thread.
Example: What Is IntersectionObserver?
<div id="target" style="margin-top: 2000px;">Scroll to me</div>
<script>
const observer = new IntersectionObserver(() => console.log("Visibility changed"));
observer.observe(document.getElementById("target"));
</script>Checking Visibility
The isIntersecting property tells you whether the target is currently intersecting the observation area. Each callback invocation receives an array of entries, since one observer can watch multiple targets and report on whichever ones changed intersection state.
Example: Checking Visibility
<div id="target">Target</div>
<script>
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => console.log("Visible:", entry.isIntersecting));
});
observer.observe(document.getElementById("target"));
</script>Using Threshold
A threshold controls how much of the target must be visible before a callback is triggered. Setting threshold to 0.5, for example, only fires the callback once at least half of the target element is visible, rather than as soon as any pixel appears.
Example: Using Threshold
<div id="target">Target</div>
<script>
const observer = new IntersectionObserver((entries) => {
console.log("At least half visible:", entries[0].isIntersecting);
}, { threshold: 0.5 });
observer.observe(document.getElementById("target"));
</script>Lazy Loading Idea
IntersectionObserver can start work only when an element approaches the visible area. This is exactly how modern lazy-loading images work: the real image source is only requested once the placeholder scrolls into view.
Example: Lazy Loading Idea
<img id="photo" data-src="photo.jpg" alt="Lazy image">
<script>
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.src = entry.target.dataset.src;
observer.unobserve(entry.target);
}
});
});
observer.observe(document.getElementById("photo"));
</script>Stopping Observation
Use unobserve for one target or disconnect to stop observing all targets. Cleaning up with unobserve or disconnect once an element no longer needs watching prevents the observer from doing unnecessary work indefinitely.
Example: Stopping Observation
<div id="target">Target</div>
<script>
const observer = new IntersectionObserver(() => console.log("changed"));
const el = document.getElementById("target");
observer.observe(el);
observer.unobserve(el); // stop watching this one element
</script>Chapter Quiz — Complete all 8 topics to unlock
0/8 topics done
Complete these topics first: