Platform under construction

Browser APIs & BOM

Advanced

Intersection & Resize Observer

IntersectionObserver and ResizeObserver let code react to visibility and size changes without constant polling.

const observer = new IntersectionObserver(entries => {
  entries.forEach(entry => console.log(entry.isIntersecting));
});

observer.observe(section);

Browser APIs & BOM

Observers watch browser-driven changes efficiently.

IntersectionObserver reports when an element enters or leaves a viewport or root area. It is useful for lazy loading, reveal effects and analytics triggers.

ResizeObserver reports when an element changes size. It is useful for components that respond to their own container, not the whole viewport.

Observers should be disconnected when no longer needed.

IntersectionObserver

Watches element visibility relative to a root.

ResizeObserver

Watches element size changes.

observe

Starts watching a target.

disconnect

Stops observing and cleans up.

Examples

Browser APIs should be used with capability checks, permissions and fallbacks.

Use observers instead of scroll polling

const observer = new IntersectionObserver(entries => {
  entries.forEach(handleEntry);
});

observer.observe(target);

Running heavy checks on every scroll

window.addEventListener("scroll", () => {
  document.querySelectorAll("section").forEach(checkPosition);
});

Code patterns

Reusable examples for quick reference.

These examples focus on practical browser APIs: URL state, storage, cookies, clipboard, permissions, observers and offline-capable platform tools.

Observe visibility

Watch when an element enters view.

const observer = new IntersectionObserver(entries => {
  for (const entry of entries) {
    entry.target.classList.toggle("is-visible", entry.isIntersecting);
  }
});

Observe one element

Start watching a target.

observer.observe(section);

Resize observer

React to element size changes.

const resizeObserver = new ResizeObserver(entries => {
  console.log(entries[0].contentRect.width);
});

Cleanup

Disconnect when feature ends.

observer.disconnect();
resizeObserver.disconnect();

Rules that matter

Treat the browser as a platform.

Browser APIs are powerful because they touch privacy, navigation, storage, permissions and performance. Use them deliberately.

Use IntersectionObserver for visibility

Avoid constant scroll calculations.

Use ResizeObserver for element size

Viewport resize is not enough for component layouts.

Disconnect observers

Clean up when targets are removed.

Keep callbacks light

Observer callbacks still run on the main thread.

Use thresholds deliberately

They control when intersection changes fire.

Provide non-JavaScript fallback

Important content should not rely on reveal effects.

Production thinking

A strong browser API layer makes features feel integrated with the platform instead of bolted onto the page.

Why does this matter?

Observers let the browser tell you when something changes instead of forcing you to keep checking.

Accessibility

Reveal effects should not hide content from keyboard users or screen readers.

Production note

Production observer code is common for lazy loading, analytics and responsive components.

SEO note

Lazy content should still be crawlable or load reliably before users need it.

Live code lab

Change the HTML, CSS or JavaScript and run the result.

The preview runs inside an isolated iframe. The JavaScript is placed inside the HTML editor for now, so every example stays together and remains easy to understand.

Mini assignment

Try this now.

Write an IntersectionObserver callback.
Add disconnect to your pseudocode.
Explain why scroll polling is weaker.

Practice assignment

Do this before moving to the next topic.

Choose which observer fits a use case.
Write observe(target).
Write disconnect cleanup.

HTML + JavaScript CSS

Live preview

Self-check

Before you continue, prove that you understand Intersection & Resize Observer.