scrollend vs. the debounce guess — interactive playground

<div class="pg">
    <h1 class="pg-title">⚡ scrollend vs. the debounce guess</h1>
    <p class="pg-sub">
      Scroll the box with a trackpad or touchscreen and pause mid-gesture, then watch which
      detector gets fooled. No trackpad? Panel 3 draws the same moment as a model.
    </p>

<div class="panel">
      <div class="panel-label"><span class="n">1</span> Scroll this list</div>
      <div class="scrollbox" id="box" tabindex="0" aria-label="Scrollable list"></div>
      <p class="hint">
        Scroll with a trackpad or touchscreen, then pause for a beat without lifting your
        fingers. The debounce guesses "stopped"; <code>scrollend</code> waits until you let go
        and the momentum ends. Mouse only? Grab the scrollbar thumb, drag, and hold still
        before you let go.
      </p>
      <div class="btn-row" style="margin-top:12px">
        <button class="btn" id="codeScroll">▶ Smooth-scroll from code</button>
        <button class="btn ghost sm" id="resetBox">Back to top</button>
      </div>
      <p class="hint">
        The button makes one smooth <code>scrollTo()</code> call. <code>scrollend</code> fires for
        that too, once, when it lands. That's the behavior behind the gotcha in panel 4.
      </p>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">2</span> Two ways to detect "stopped"</div>
      <div class="field">
        <label class="ctl-label" for="delay">Debounce delay: <span id="delayVal">150</span>ms</label>
        <input type="range" id="delay" min="30" max="400" step="10" value="150" />
      </div>
      <p class="hint">Lower it, then scroll and pause mid-gesture: the guess fires during the pause, while your fingers are still down. Raise it and every real stop gets reported late.</p>

<div class="race">
        <div class="card">
          <h4>🐢 Debounced guess</h4>
          <div class="status" id="statusDebounce"><span class="dot info" id="dotDebounce"></span><span id="textDebounce">Waiting for a scroll…</span></div>
          <p class="count">"Stopped" reports this scroll: <span class="counter" id="countDebounce">0</span></p>
        </div>
        <div class="card">
          <h4>⚡ Native scrollend</h4>
          <div class="status" id="statusNative"><span class="dot info" id="dotNative"></span><span id="textNative">Waiting for a scroll…</span></div>
          <p class="count">"Stopped" reports this scroll: <span class="counter" id="countNative">0</span></p>
        </div>
      </div>

<div class="log" id="log" style="margin-top:14px" aria-live="polite"></div>
      <div class="btn-row" style="margin-top:10px">
        <button class="btn sm ghost" id="clearLog">Clear log</button>
      </div>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">3</span> Model: a trackpad scroll with a pause <span class="pill">model: drawn, not live</span></div>
      <p class="hint" style="margin-top:0">
        This is a drawn timeline, not events from your device. It shows what a trackpad sends
        when you scroll, rest your fingers for a moment, scroll again, then lift and let the
        momentum glide. The debounce uses the delay from panel 2.
      </p>
      <div class="two" style="margin-top:10px">
        <div class="field">
          <label class="ctl-label" for="pause">Fingers resting mid-gesture: <span id="pauseVal">250</span>ms</label>
          <input type="range" id="pause" min="0" max="600" step="10" value="250" />
        </div>
        <div class="field">
          <span class="ctl-label">Debounce delay (from panel 2): <span id="delayVal2">150</span>ms</span>
        </div>
      </div>

<div class="tl" id="tl">
        <div class="tl-row-label">Fingers</div>
        <div class="tl-row" id="rowFingers"></div>
        <div class="tl-row-label">scroll events</div>
        <div class="tl-row" id="rowTicks"></div>
        <div class="tl-row-label">"Stopped" reports</div>
        <div class="tl-row" id="rowMarks"></div>
        <div class="axis"><span>0ms</span><span id="axisMid"></span><span id="axisEnd"></span></div>
      </div>
      <div class="legend">
        <span><i class="sw move"></i>fingers moving</span>
        <span><i class="sw rest"></i>fingers resting, still down</span>
        <span><i class="sw lift"></i>fingers lift</span>
        <span><i class="sw glide"></i>momentum glide</span>
        <span><i class="sw tick"></i><code>scroll</code> event</span>
        <span><i class="sw early"></i>debounce guess, too early</span>
        <span><i class="sw guess"></i>debounce guess, late</span>
        <span><i class="sw end"></i><code>scrollend</code></span>
      </div>
      <div class="output" id="modelSummary" style="margin-top:12px;font-size:0.88rem"></div>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">4</span> The gotcha: scrollend fires on scrolls you trigger too</div>
      <p class="hint" style="margin-top:0">
        This box snaps to the nearest 40px section on <code>scrollend</code> with
        <code>scrollTo({ top, behavior: "smooth" })</code>, so every correction is itself a scroll.
        Pick a handler, then nudge the box or scroll it by hand.
      </p>
      <div class="seg" role="group" aria-label="Handler" style="margin-top:10px">
        <button type="button" data-mode="exact" aria-pressed="true">Unguarded, exact snap</button>
        <button type="button" data-mode="flawed" aria-pressed="false">Unguarded, flawed snap (model)</button>
        <button type="button" data-mode="guarded" aria-pressed="false">Guarded, flawed snap</button>
      </div>
      <p class="hint" id="modeHint"></p>
      <div class="scrollbox" id="box2" tabindex="0" aria-label="Snapping list"></div>
      <div class="status" style="margin-top:12px">
        <span class="dot info" id="dotLoop"></span>
        <span>scrollend handler runs: <span class="counter" id="runCount">0</span></span>
        <span class="muted">·</span>
        <span>scrollTo() calls: <span class="counter" id="callCount">0</span></span>
      </div>
      <p class="hint" id="loopStatus" aria-live="polite">Nudge it, then watch the counters.</p>
      <div class="btn-row" style="margin-top:10px">
        <button class="btn sm" id="nudge">Nudge scroll off-snap</button>
        <button class="btn sm ghost" id="resetLoop">Reset</button>
      </div>
    </div>
  </div>

preview

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