Coba scroll Instagram Stories atau TikTok feed. Tiap geser jari — pas berhenti, otomatis "kunci" ke story berikutnya, gak ada di tengah-tengah. Itu scroll snap — fitur yang bikin scrolling kerasa rapi dan terkontrol, bukan scroll bebas yang berhenti random. Dulu butuh JavaScript library, sekarang CSS native bisa. Cocok banget buat carousel, gallery, halaman slide-by-slide, atau onboarding step.

🤔 Magnet stasiun. Scroll snap kayak rel kereta yang ada magnet di tiap stasiun — kamu bisa scroll natural, tapi pas dekat titik snap, magnet tarik biar berhenti rapi. Tanpa JS, tanpa library, smooth UX gratis dari browser modern.

.gallery {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}

.gallery > .slide {
  min-width: 100%;
  scroll-snap-align: start;
}

scroll-snap-type pada container:

• x mandatory — snap horizontal, selalu berhenti di titik snap
• y mandatory — snap vertikal
• x proximity — snap hanya jika dekat dengan titik snap
• both mandatory — snap di kedua arah

scroll-snap-align pada item:

• start — snap ke awal item
• center — snap ke tengah item
• end — snap ke akhir item

Contoh gallery horizontal:

.gallery {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  gap: 16px;
}

.gallery > div {
  flex: 0 0 300px;
  scroll-snap-align: start;
}

🎭 Analogi sehari-hari

Scroll snap = rel kereta dengan magnet di stasiun. Scroll natural, tapi pas dekat stasiun (snap point), magnet tarik agar berhenti rapi. Carousel tanpa JS, smooth + kontrol predictable.

⚠️ Jebakan yang sering ditemui

• scroll-snap-type di parent, scroll-snap-align di child. Sering kebalik.
• mandatory vs proximity — mandatory = SELALU snap (bisa rebut user kontrol). Proximity = snap kalau dekat (lebih natural).
• Item harus muat di container — kalau item lebih besar dari viewport, snap aneh.
• overflow: scroll/auto wajib di parent — tanpa scroll, snap tidak relevant.
• scroll-padding untuk offset titik snap (e.g., header sticky di atas).
• Touch scrolling support bagus modern. Mouse wheel kadang lebih jagged.
• Mix axis (x mandatory + child y align) bisa konflik — test cross-browser.

TL;DR: Scroll snap = magnet stasiun di scrolling — rapi otomatis, gak perlu JS library. Setup: scroll-snap-type: x mandatory di parent + scroll-snap-align: start/center/end di tiap child. Cocok buat carousel, gallery, slide-by-slide. mandatory = SELALU snap (bisa rebut kontrol user), proximity = cuma snap kalau dekat (lebih natural). Wajib overflow: auto/scroll di parent. Pakai scroll-padding buat offset header sticky.