scrollbar-gutter — interactive playground

<div class="pg">
    <h1 class="pg-title">🎮 Does your page flinch when a modal opens?</h1>
    <p class="pg-sub">
      This box simulates a page with a scroll-locked modal. Click
      <strong>Lock scroll</strong> to see the content box resize when the scrollbar
      disappears — then turn on <code>scrollbar-gutter: stable</code> and watch the
      shift disappear too.
    </p>

<div class="panel">
      <div class="panel-label"><span class="n">1</span> Controls</div>
      <div class="btn-row">
        <button class="btn primary" id="lockBtn">Lock scroll (open modal)</button>
        <button class="btn ghost" id="reset">Reset</button>
      </div>
      <div class="btn-row" style="margin-top:10px">
        <label class="toggle">
          <input type="checkbox" id="gutterToggle" /><span class="switch"></span>
          <span><code>scrollbar-gutter: stable</code></span>
        </label>
      </div>
      <div class="presets" style="margin-top:14px">
        <button class="btn sm" data-preset="bug">⚠️ Reproduce the bug</button>
        <button class="btn sm" data-preset="fix">✅ Show the fix</button>
      </div>
      <p class="hint" id="scrollbarInfo" style="margin-top:10px">Detecting your scrollbar type…</p>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">2</span> Result</div>
      <div class="stage" id="stage">
        <div class="edge-marker" id="edgeMarker"></div>
        <div class="stage-lines" id="stageLines"></div>
      </div>

<div class="readout">
        <div class="pill">
          <div class="muted" style="font-size:0.8rem">Content edge shifted</div>
          <div class="big-shift" id="shiftValue">0px</div>
        </div>
        <div class="pill">
          <div class="muted" style="font-size:0.8rem">Scroll state</div>
          <div class="big-shift" id="lockState">unlocked</div>
        </div>
      </div>

<div class="status" id="status" style="margin-top:12px">
        <span class="dot info" id="dot"></span>
        <span id="statusText">Ready — try locking the scroll with the toggle off.</span>
      </div>
      <p class="hint" id="hint">
        Caption: the thin line on the right edge of the box marks where the content
        currently ends. Watch it when you lock the scroll.
      </p>
    </div>
  </div>

preview

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