overscroll-behavior — interactive playground

<div class="pg">
    <h1 class="pg-title">📜 overscroll-behavior live</h1>
    <p class="pg-sub">
      Scroll the <strong>inner box</strong> in each panel past its bottom edge and
      watch what happens to the outer container. On the left, scrolling chains to
      the parent (default). On the right, <code>overscroll-behavior-y: contain</code>
      stops it.
    </p>

<div class="two-up">
      
      <div>
        <div class="panel-header">
          <span class="badge badge-bad">auto (default)</span>
        </div>
        <code class="css-badge">overscroll-behavior-y: auto</code>
        <div class="demo-outer" id="outerAuto">
          <div class="outer-content">
            <span class="top-label">↑ outer top</span>
            <span style="color:var(--muted)">← outer container scrolls when inner hits its edge</span>
            <span class="bottom-label">↓ outer bottom</span>
          </div>
          <div class="demo-inner" id="innerAuto">
            <div class="inner-content">
              <span class="top-label">↑ inner top</span>
              <span>scroll me ↕</span>
              <span>scroll further ↕</span>
              <span>scroll further ↕</span>
              <span class="bottom-label">↓ inner bottom — keep scrolling to see chaining</span>
            </div>
          </div>
        </div>
        <div class="status-row">
          <div class="status-dot" id="dotAuto"></div>
          <span id="statusAuto" style="color:var(--muted)">Scroll the inner box…</span>
        </div>
        <div class="log-area" id="logAuto">
          <div class="empty">Events appear here…</div>
        </div>
      </div>

<div>
        <div class="panel-header">
          <span class="badge badge-good">contain</span>
        </div>
        <code class="css-badge">overscroll-behavior-y: contain</code>
        <div class="demo-outer" id="outerContain">
          <div class="outer-content">
            <span class="top-label">↑ outer top</span>
            <span style="color:var(--muted)">← outer container stays put when inner hits its edge</span>
            <span class="bottom-label">↓ outer bottom</span>
          </div>
          <div class="demo-inner" id="innerContain" style="overscroll-behavior-y: contain;">
            <div class="inner-content">
              <span class="top-label">↑ inner top</span>
              <span>scroll me ↕</span>
              <span>scroll further ↕</span>
              <span>scroll further ↕</span>
              <span class="bottom-label">↓ inner bottom — scroll past this edge</span>
            </div>
          </div>
        </div>
        <div class="status-row">
          <div class="status-dot" id="dotContain"></div>
          <span id="statusContain" style="color:var(--muted)">Scroll the inner box…</span>
        </div>
        <div class="log-area" id="logContain">
          <div class="empty">Events appear here…</div>
        </div>
      </div>
    </div>

<div class="panel" style="margin-top:20px">
      <div class="panel-label"><span class="n">2</span> Toggle the property live</div>
      <p class="label">Switch <code>overscroll-behavior-y</code> on the right inner box to see the difference in real time.</p>
      <div class="btn-row">
        <button class="btn primary sm" onclick="setContain('contain')">contain</button>
        <button class="btn sm" onclick="setContain('none')">none</button>
        <button class="btn sm" onclick="setContain('auto')">auto (chain again)</button>
      </div>
      <div style="margin-top:10px;font-family:var(--mono);font-size:0.8rem;color:var(--muted)">
        Current value: <strong id="currentVal" style="color:var(--accent)">contain</strong>
      </div>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">3</span> The CSS making this work</div>
      <div class="code">/* One property stops scroll from escaping the container */
.inner-box {
  overflow-y: auto;
  overscroll-behavior-y: contain;  /* ← that's it */
}

/* Axis-specific variants */
overscroll-behavior-x: contain;   /* horizontal */
overscroll-behavior:   contain;   /* both axes (shorthand) */

/* Suppress the overscroll effect entirely */
overscroll-behavior-y: none;      /* also kills pull-to-refresh */</div>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">4</span> CSS vs JavaScript approach</div>
      <table class="vs-table">
        <thead>
          <tr>
            <th>Aspect</th>
            <th class="good">overscroll-behavior: contain</th>
            <th class="bad">touchmove + preventDefault()</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td class="row-label">Code required</td>
            <td class="good">One CSS declaration</td>
            <td class="bad">~15 lines of JS event handling</td>
          </tr>
          <tr>
            <td class="row-label">Scroll performance</td>
            <td class="good">Native — no main-thread cost</td>
            <td class="bad"><code>passive: false</code> blocks scroll on every touchmove</td>
          </tr>
          <tr>
            <td class="row-label">Edge accuracy</td>
            <td class="good">Exact — browser knows its own boundaries</td>
            <td class="bad">Must compare scrollTop, scrollHeight, clientHeight</td>
          </tr>
          <tr>
            <td class="row-label">Cleanup</td>
            <td class="good">Nothing — it's a style rule</td>
            <td class="bad">removeEventListener on unmount</td>
          </tr>
          <tr>
            <td class="row-label">Pull-to-refresh</td>
            <td class="good">Controllable with <code>none</code></td>
            <td class="bad">Requires separate logic</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>

preview

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