Intersection Observer Get Certified
The Intersection Observer API lets you efficiently detect when an element enters or leaves the viewport (or another container). It is the modern, performant way to implement lazy loading, infinite scroll, and scroll-triggered animations.
Basic Usage
What this code does: Creates an observer and watches a target element for visibility changes.
function createMockIntersectionObserver(callback) {
const observed = [];
return {
observe(target) {
observed.push(target);
console.log("Now observing:", target.label);
},
simulate(target, isIntersecting) {
if (observed.includes(target)) {
callback([{ target, isIntersecting, intersectionRatio: isIntersecting ? 1 : 0 }]);
}
}
};
}
const observer = createMockIntersectionObserver((entries) => {
entries.forEach(entry => {
console.log(entry.target.label, "isIntersecting:", entry.isIntersecting);
});
});
const box = { label: "hero-image" };
observer.observe(box);
observer.simulate(box, true);Simulates IntersectionObserver so examples run without a real viewport.
Tracks which targets are being watched.
Adds the target and logs it — like the real
observer.observe(el).Fires the callback with an entry only if the target is still observed.
target, isIntersecting, intersectionRatio — same fields the browser provides.Runs for each entry; here it logs visibility.
Watch the box, then simulate it entering the viewport.
Lazy Loading Images
What this code does: Loads an image only when it becomes visible, then stops observing it.
function createMockIntersectionObserver(callback) {
const observed = [];
return {
observe(target) { observed.push(target); },
unobserve(target) {
const i = observed.indexOf(target);
if (i > -1) observed.splice(i, 1);
console.log("Stopped observing:", target.label);
},
simulate(target, isIntersecting) {
if (observed.includes(target)) {
callback([{ target, isIntersecting, intersectionRatio: isIntersecting ? 1 : 0 }]);
}
}
};
}
const observer = createMockIntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
console.log("Loading image:", entry.target.label);
observer.unobserve(entry.target);
}
});
});
const img = { label: "product-photo.jpg" };
observer.observe(img);
observer.simulate(img, true);Can stop watching one target.
Removes the target from the list so future simulates are ignored.
When visible, “load” the image and unobserve — one-time action.
Log load, then unobserve so the callback won’t fire again for this element.
Observe the image, then simulate it becoming visible.
Observing Multiple Elements
What this code does: Watches several elements and logs which ones are currently visible.
function createMockIntersectionObserver(callback) {
const observed = [];
return {
observe(target) { observed.push(target); },
simulate(target, isIntersecting) {
if (observed.includes(target)) {
callback([{ target, isIntersecting, intersectionRatio: isIntersecting ? 1 : 0 }]);
}
}
};
}
const observer = createMockIntersectionObserver((entries) => {
entries.forEach(entry => {
console.log(entry.target.label, "→", entry.isIntersecting ? "visible" : "hidden");
});
});
const card1 = { label: "card-1" };
const card2 = { label: "card-2" };
observer.observe(card1);
observer.observe(card2);
observer.simulate(card1, true);
observer.simulate(card2, false);Basic observe + simulate.
Logs visible vs hidden for each entry.
One observer can watch many elements.
Both cards are registered.
Simulates entering the viewport.
Simulates still outside — isIntersecting false.
Scroll-Triggered Animation
What this code does: Triggers a fade-in or fade-out when a section enters or leaves the viewport.
function createMockIntersectionObserver(callback) {
const observed = [];
return {
observe(target) { observed.push(target); },
simulate(target, isIntersecting) {
if (observed.includes(target)) {
callback([{ target, isIntersecting, intersectionRatio: isIntersecting ? 1 : 0 }]);
}
}
};
}
const observer = createMockIntersectionObserver((entries) => {
entries.forEach(entry => {
console.log(entry.target.label, entry.isIntersecting ? "→ fade in" : "→ fade out");
});
});
const section = { label: "about-section" };
observer.observe(section);
observer.simulate(section, true);
observer.simulate(section, false);Same observe/simulate pattern.
Map isIntersecting to fade-in / fade-out (in real code you’d toggle a CSS class).
Start watching the about section.
Fade in when it becomes visible.
Fade out when it leaves the viewport.
Stopping Observation with unobserve()
What this code does: Stops watching a single element after the first time it becomes visible.
function createMockIntersectionObserver(callback) {
const observed = [];
return {
observe(target) { observed.push(target); },
unobserve(target) {
const i = observed.indexOf(target);
if (i > -1) observed.splice(i, 1);
console.log("Stopped observing:", target.label);
},
simulate(target, isIntersecting) {
if (observed.includes(target)) {
callback([{ target, isIntersecting, intersectionRatio: isIntersecting ? 1 : 0 }]);
}
}
};
}
const observer = createMockIntersectionObserver((entries) => {
entries.forEach(entry => {
console.log("Update for", entry.target.label, "- isIntersecting:", entry.isIntersecting);
});
});
const banner = { label: "promo-banner" };
observer.observe(banner);
observer.simulate(banner, true);
observer.unobserve(banner);
observer.simulate(banner, false); // this will be ignored
console.log("No further updates after unobserve");Supports stopping a single target.
Removes target; logs confirmation.
Logs every visibility update while observed.
Banner enters → update fires.
Stop watching this banner.
Ignored — target is no longer in the observed list.
No further updates. Use unobserve for one-shot work (lazy load, etc.).
Disconnecting the Whole Observer
What this code does: Stops watching every element at once with disconnect().
function createMockIntersectionObserver(callback) {
const observed = [];
return {
observe(target) { observed.push(target); },
disconnect() {
observed.length = 0;
console.log("Observer disconnected");
},
simulate(target, isIntersecting) {
if (observed.includes(target)) {
callback([{ target, isIntersecting, intersectionRatio: isIntersecting ? 1 : 0 }]);
}
}
};
}
const observer = createMockIntersectionObserver((entries) => {
entries.forEach(entry => console.log("Visible:", entry.target.label));
});
const itemA = { label: "item-a" };
const itemB = { label: "item-b" };
observer.observe(itemA);
observer.observe(itemB);
observer.disconnect();
observer.simulate(itemA, true);
observer.simulate(itemB, true);
console.log("Done");Can clear all targets at once.
Empties the observed list — stops everything.
Would log visible items if still observed.
item-a and item-b.
Both registered.
All observation stops.
Both ignored. Call disconnect on cleanup (e.g. component unmount).
The threshold Option
What this code does: Fires the callback at specific visibility percentages using threshold.
function createMockIntersectionObserver(callback, options) {
options = options || {};
console.log("Configured thresholds:", options.threshold);
const observed = [];
return {
observe(target) { observed.push(target); },
simulate(target, ratio) {
if (observed.includes(target)) {
callback([{ target, isIntersecting: ratio > 0, intersectionRatio: ratio }]);
}
}
};
}
const observer = createMockIntersectionObserver(
(entries) => {
entries.forEach(entry => {
console.log(entry.target.label, "ratio:", entry.intersectionRatio);
});
},
{ threshold: [0, 0.5, 1] }
);
const chart = { label: "sales-chart" };
observer.observe(chart);
observer.simulate(chart, 0);
observer.simulate(chart, 0.5);
observer.simulate(chart, 1);Accepts threshold config and logs it.
Shows what the observer was configured with.
Passes intersectionRatio so you can react to partial visibility.
[0, 0.5, 1] = fire at 0%, 50%, and 100% visible.
Start watching.
Simulate 0 → 0.5 → 1 to see progressive callbacks.
The rootMargin Option
What this code does: Explains how rootMargin expands the intersection area for early triggering.
console.log("rootMargin expands or shrinks the area used for intersection.");
console.log("Example: rootMargin: '200px' triggers 200px before the element enters the viewport.");
console.log("Useful for preloading content just before it becomes visible.");Grows or shrinks the root’s intersection area (like CSS margin).
‘200px’ means the callback can fire 200px before the element is actually on screen.
Preload images or data just before they scroll into view.
IntersectionObserver vs Manual Scroll Listening
| Feature | IntersectionObserver | scroll + getBoundingClientRect |
|---|---|---|
| Fires on every scroll pixel? | No — only on real visibility changes | Yes (unless throttled) |
| Performance impact | Low | Can be high |
| Multiple thresholds | Built-in | Manual calculation |
| Code complexity | Low | Higher |
Common Mistakes
- Forgetting to call
unobserve()after a one-time action - Never calling
disconnect()when the component is removed - Assuming the callback runs synchronously after
observe() - Ignoring
intersectionRatiowhen you need precise visibility
Best Practices
- Prefer IntersectionObserver over manual scroll listeners
- Call
unobserve()after one-time actions (lazy load, etc.) - Call
disconnect()on cleanup - Use threshold arrays for progressive animations
- Use rootMargin to preload content early
Quick Summary
new IntersectionObserver(callback, options)creates the observerobserve(target)/unobserve(target)control single elementsdisconnect()stops everything- Entries give you
target,isIntersecting, andintersectionRatio thresholdandrootMargingive fine control
Try It Yourself
What this code does: Observes a gallery at multiple thresholds and unobserves it after loading.
function createMockIntersectionObserver(callback, options) {
options = options || {};
const observed = [];
return {
observe(target) {
observed.push(target);
console.log("Observing:", target.label);
},
unobserve(target) {
const i = observed.indexOf(target);
if (i > -1) observed.splice(i, 1);
},
simulate(target, ratio) {
if (observed.includes(target)) {
callback([{ target, isIntersecting: ratio > 0, intersectionRatio: ratio }]);
}
}
};
}
const observer = createMockIntersectionObserver(
(entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
console.log("Loading:", entry.target.label, "at ratio", entry.intersectionRatio);
observer.unobserve(entry.target);
}
});
},
{ threshold: [0.25, 0.75] }
);
const gallery = { label: "photo-gallery" };
observer.observe(gallery);
observer.simulate(gallery, 0.25);
observer.simulate(gallery, 0.75);observe, unobserve, simulate with ratio.
Registers and logs the target.
Removes so it won’t fire again.
Delivers entry with intersectionRatio.
On intersect, log load and unobserve. Thresholds [0.25, 0.75].
Start watching.
Triggers load and unobserve.
Ignored — already unobserved after the first hit.
Tip: Use IntersectionObserver for any visibility-based logic. Always unobserve or disconnect when you no longer need the observer.
🧪 Test Your JavaScript Code
Edit the code on the left and click “Run Code” to see the console output on the right.
📝 JavaScript Code
👁 Console Output
Click “Run Code” to see the output here.
Ctrl + Enter
to run code
Esc
to close
Code Explanation
The complete example stays visible. Use Previous and Next to move through its logical blocks.
Complete code · highlighted block
Explanation
Select Next to begin exploring the code.
Block 0 of 0