passive: true — interactive playground

<div class="pg">
    <h1 class="pg-title">🎮 Passive event listeners</h1>
    <p class="pg-sub">
      The list below has a <code>touchmove</code>/<code>wheel</code> listener on it that does a little
      simulated work every time it fires. Flip <code>passive</code> off and on, then scroll (mouse wheel
      or trackpad) and feel the difference — same handler, same cost, very different scroll.
    </p>

<div class="panel">
      <div class="panel-label"><span class="n">1</span> Controls</div>
      <div class="btn-row">
        <label class="toggle">
          <input type="checkbox" id="passiveToggle" /><span class="switch"></span>
          <span><code>{ passive: true }</code></span>
        </label>
        <label class="toggle" style="margin-left: 6px">
          <input type="checkbox" id="cancelToggle" /><span class="switch"></span>
          <span>also try <code>preventDefault()</code></span>
        </label>
      </div>
      <div class="field" style="margin-top: 14px">
        <label class="label" for="cost">Handler cost: <b id="costLabel">60</b>ms of simulated work per event</label>
        <input type="range" id="cost" min="0" max="150" value="60" step="10" />
      </div>
      <div class="presets" style="margin-top: 12px">
        <button class="btn sm" data-preset="light">Light handler (10ms)</button>
        <button class="btn sm" data-preset="heavy">Heavy handler (90ms)</button>
        <button class="btn sm ghost" id="reset">Reset counters</button>
      </div>
      <p class="hint">
        Handler cost simulates real work — reading layout, updating a badge, logging analytics. It's
        identical in both modes. What changes is whether the browser waits for it before it scrolls.
      </p>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">2</span> Scroll this list</div>
      <div class="heartbeat-track"><div class="heartbeat-dot" id="heartbeat"></div></div>
      <p class="hint" style="margin-top: -4px; margin-bottom: 10px;">
        That dot sweeps left→right on every animation frame. If it stutters or jumps, the main thread
        was busy — that happens in <em>both</em> modes, because the handler cost is the same either way.
      </p>
      <div class="scrollbox" id="scrollbox">
        <ul id="rows"></ul>
      </div>
      <div class="status" id="status" style="margin-top: 12px">
        <span class="dot info" id="dot"></span><span id="statusText">Scroll the list above to begin.</span>
      </div>
      <div class="stat-row">
        <div class="stat">Scroll events handled<b id="nEvents">0</b></div>
        <div class="stat">Last handler time<b id="lastCost">—</b></div>
        <div class="stat"><code>preventDefault()</code> calls ignored<b id="nIgnored">0</b></div>
      </div>
      <p class="hint" id="explain" style="margin-top: 10px;">
        With <code>passive</code> off, the browser has to run this handler and check
        <code>event.defaultPrevented</code> before it's allowed to move the list — because a
        <code>touchmove</code>/<code>wheel</code> listener is allowed to cancel the scroll. That's the drag you feel.
      </p>
    </div>
  </div>

preview

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