CSS scroll-snap — interactive playground

<div class="pg">
    <h1 class="pg-title">🎮 CSS scroll-snap</h1>
    <p class="pg-sub">
      Drag or flick the strip below. No JavaScript moves it — <code>scroll-snap-type</code>
      and <code>scroll-snap-align</code> just tell the browser where to let go.
    </p>

<div class="panel">
      <div class="panel-label"><span class="n">1</span> Controls</div>
      <div class="btn-row" style="flex-wrap:wrap; gap:10px">
        <div class="seg" id="typeSeg" role="group" aria-label="scroll-snap-type strictness">
          <button class="btn sm" data-type="none">none</button>
          <button class="btn sm" data-type="proximity">proximity</button>
          <button class="btn sm" aria-pressed="true" data-type="mandatory">mandatory</button>
        </div>
        <div class="seg" id="alignSeg" role="group" aria-label="scroll-snap-align">
          <button class="btn sm" aria-pressed="true" data-align="center">align: center</button>
          <button class="btn sm" data-align="start">align: start</button>
        </div>
        <label class="toggle" style="margin-left:2px">
          <input type="checkbox" id="stopAlways" /><span class="switch"></span>
          <span><code>scroll-snap-stop: always</code></span>
        </label>
      </div>
      <div class="presets" style="margin-top:14px">
        <button class="btn sm" id="flick">⚡ Fast flick (scroll 900px)</button>
        <button class="btn sm ghost" id="resetScroll">Reset scroll</button>
      </div>
      <p class="hint">
        <strong>Fast flick</strong> jumps the strip 900px in one go — like flinging it hard.
        With <code>mandatory</code> + <code>stop: always</code> on, it stops at the very next
        card instead of sailing past three of them. Try it both ways.
      </p>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">2</span> Result — drag me</div>
      <div class="track-wrap">
        <div class="track snap-mandatory align-center" id="track">
          <div class="card">1</div>
          <div class="card">2</div>
          <div class="card">3</div>
          <div class="card">4</div>
          <div class="card">5</div>
          <div class="card">6</div>
          <div class="card">7</div>
          <div class="card">8</div>
        </div>
      </div>
      <div class="status" style="margin-top:8px">
        <span class="dot info" id="dot"></span><span id="statusText">Card 1 is snapped. Drag the strip.</span>
      </div>
      <p class="hint" id="css-out">
        Current CSS: <code>scroll-snap-type: x mandatory; scroll-snap-align: center;</code>
      </p>
    </div>
  </div>

preview

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