Scroll Snap

Native CSS scroll snapping. Use scroll="snap-x" or scroll="snap-y" on the container and snap= on each child. Also controls scroll behaviour, overscroll, and scrollbar appearance.

Horizontal snap carousel

<div scroll="snap-x" scrollbar="hidden" style="display:flex;gap:1rem;">
  <div snap="center" style="min-width:280px;height:160px;flex-shrink:0;">Slide 1</div>
  <div snap="center" style="min-width:280px;height:160px;flex-shrink:0;">Slide 2</div>
  <div snap="center" style="min-width:280px;height:160px;flex-shrink:0;">Slide 3</div>
</div>

Vertical snap

<main scroll="snap-y" style="height:100vh;overflow-y:auto;">
  <section snap="start" style="height:100vh;">Section 1</section>
  <section snap="start" style="height:100vh;">Section 2</section>
  <section snap="start" style="height:100vh;">Section 3</section>
</main>

Scrollbar styles

scrollbar="hidden"  → no scrollbar
scrollbar="thin"    → narrow, styled scrollbar

Overscroll behaviour

overscroll="none"    → disables bounce / chained scroll
overscroll="contain" → scroll stays inside this element
overscroll="auto"    → browser default

Scroll snap stop

<!-- Force stop at each slide (prevents fast flick skipping) -->
<div snap="start" snap="always">…</div>

<!-- Proximity snap (snaps only when close to target) -->
<div scroll="snap-x" snap-proximity>…</div>

<!-- Scroll padding -->
<div scroll="snap-y" scroll-pad="lg">…</div>

All values

scroll="snap-x|snap-y|snap-both|smooth|auto"
scroll-pad="sm|md|lg"
snap="start|center|end|none|always"
snap-proximity  (on container)
overscroll="none|contain|auto"
scrollbar="hidden|thin"