Scroll Snap

vel-src: interactivity.css

Utilities for controlling scroll snap behavior in scroll containers and their children.

Class	Properties
vel-snap-start	scroll-snap-align: start
vel-snap-end	scroll-snap-align: end
vel-snap-center	scroll-snap-align: center
vel-snap-none	scroll-snap-align: none
vel-snap-x	scroll-snap-type: x mandatory
vel-snap-y	scroll-snap-type: y mandatory
vel-snap-both	scroll-snap-type: both mandatory
vel-snap-mandatory	scroll-snap-type: var(--vel-scroll-snap-axis, both) mandatory
vel-snap-proximity	scroll-snap-type: var(--vel-scroll-snap-axis, both) proximity

Examples

Horizontal scroll snap carousel

Slide 1

Slide 2

Slide 3

example.html

<div class="vel-snap-x" style="display:flex;overflow-x:auto;gap:1rem;padding:1rem;background:#060b17;border:1px solid #1e2d45;border-radius:0.5rem;scroll-snap-type:x mandatory">
  <div class="vel-snap-start" style="flex-shrink:0;width:16rem;height:8rem;background:#0d1422;border:1px solid #1e2d45;border-radius:0.5rem;display:flex;align-items:center;justify-content:center;color:#a87fff">Slide 1</div>
  <div class="vel-snap-start" style="flex-shrink:0;width:16rem;height:8rem;background:#0d1422;border:1px solid #1e2d45;border-radius:0.5rem;display:flex;align-items:center;justify-content:center;color:#a87fff">Slide 2</div>
  <div class="vel-snap-start" style="flex-shrink:0;width:16rem;height:8rem;background:#0d1422;border:1px solid #1e2d45;border-radius:0.5rem;display:flex;align-items:center;justify-content:center;color:#a87fff">Slide 3</div>
</div>