IntersectionObserver — interactive playground

<div class="pg">
    <h1 class="pg-title">🎮 IntersectionObserver: catch visibility, not scroll pixels</h1>
    <p class="pg-sub">
      Scroll the stage below and watch <code>isIntersecting</code> and <code>intersectionRatio</code>
      update in the log — only when the target's visibility actually crosses a line you set, never on
      every scroll frame. Drag <strong>threshold</strong> and <strong>root margin</strong> to change
      exactly when that happens, or flip <strong>lazy-load mode</strong> to see the real one-shot pattern:
      fade in once, then <code>unobserve()</code>.
    </p>

<div class="banner banner-noio" id="noIoBanner">
      This browser doesn't expose <code>IntersectionObserver</code>, so the live demo below can't run.
      It's been Baseline and widely available since 2019 — try a current Chrome, Safari, or Firefox.
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">1</span> Controls</div>
      <div class="wrap-controls">
        <div class="field" style="min-width:220px">
          <span class="label">Threshold — <span id="thresholdVal" class="mono">0.00</span></span>
          <input type="range" id="thresholdRange" min="0" max="1" step="0.05" value="0" aria-describedby="thresholdHint" />
          <p class="hint" id="thresholdHint" style="margin-top:0">
            The fraction of the box that must be visible before the callback reports <code>isIntersecting: true</code>.
            <code>0</code> fires at the first visible pixel; <code>1</code> waits for the whole box.
          </p>
        </div>
        <div class="field" style="min-width:220px">
          <span class="label">Root margin (bottom) — <span id="marginVal" class="mono">0px</span></span>
          <input type="range" id="marginRange" min="-100" max="250" step="10" value="0" aria-describedby="marginHint" />
          <p class="hint" id="marginHint" style="margin-top:0">
            Grows or shrinks the stage's own visible edge for intersection purposes. Positive fires
            <strong>before</strong> the box reaches the fold (preloading); negative delays it.
          </p>
        </div>
      </div>
      <div class="row" style="margin-top:14px">
        <label class="toggle">
          <input type="checkbox" id="lazyToggle" />
          <span class="switch"></span>
          <span>Lazy-load mode (fade in once, then <code style="font-family:inherit">unobserve()</code>)</span>
        </label>
      </div>
      <div class="presets" style="margin-top:14px">
        <button class="btn sm" data-preset="default">Default</button>
        <button class="btn sm" data-preset="preload">Preload 150px early</button>
        <button class="btn sm" data-preset="impression">Impression (50% visible)</button>
        <button class="btn sm" data-preset="lazyload">Lazy-load image</button>
      </div>
      <div class="btn-row" style="margin-top:14px">
        <button class="btn ghost" id="resetBtn">↺ Reset demo</button>
      </div>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">2</span> Scroll the stage</div>
      <div class="scroll-stage stage-wrap" id="scrollStage">
        <div class="scroll-track">
          <div class="spacer top">↓ scroll down to bring the target into view ↓</div>
          <div class="target" id="target">Target box<br />(the observed element)</div>
          <div class="spacer bottom">You're past it now — scroll back up to see it exit.</div>
        </div>
      </div>

<div class="readout-row">
        <div class="readout-item">
          <span class="k">isIntersecting</span>
          <span class="pill" id="isectPill">—</span>
        </div>
        <div class="readout-item">
          <span class="k">intersectionRatio</span>
          <span class="big-num" id="ratioBig">0.00</span>
        </div>
        <div class="readout-item grow" style="min-width:140px">
          <span class="k">visible fraction</span>
          <div class="ratio-bar"><span id="ratioBar"></span></div>
        </div>
      </div>
      <div class="status" id="status" style="margin-top:12px">
        <span class="dot info" id="statusDot"></span>
        <span id="statusText">Ready — scroll the stage above.</span>
      </div>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">3</span> Live entries</div>
      <div class="log" id="log" role="log" aria-label="IntersectionObserver callback entries">
        <div class="log-empty">No callbacks yet — scroll the stage to trigger one.</div>
      </div>
      <p class="hint">
        Every line here is one real <code>IntersectionObserverEntry</code>. Notice how few there are
        compared to how many pixels you scrolled — the callback only runs when visibility actually
        crosses your threshold, off the main scroll path.
      </p>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">4</span> What's running</div>
      <div class="code" id="configCode"></div>
    </div>
  </div>

preview

Edits run in a sandbox in your browser — nothing is saved and nothing leaves the page.