📛 CSS Scroll Snap

Panduan lengkap CSS Scroll Snap untuk membuat scroll yang presisi

📌 Elements

💡 Scroll Snap Fundamental

CSS Scroll Snap memungkinkan Anda membuat scroll yang "snap" ke posisi tertentu, ideal untuk galeri, carousel, dan tampilan halaman penuh.

scroll-snap.css
/* Container Properties */
.scroll-container {
  scroll-snap-type: y mandatory;
  overflow-y: scroll;
  height: 100vh;
}

/* Child Elements */
.scroll-item {
  scroll-snap-align: start;
  height: 100vh;
}

/* Horizontal Example */
.horizontal-scroll {
  scroll-snap-type: x mandatory;
  overflow-x: scroll;
  display: flex;
}

📝 Penjelasan Detail:

â€ĸ scroll-snap-type - Container property menentukan perilaku snap
â€ĸ scroll-snap-align - Child property menentukan posisi snap
â€ĸ scroll-snap-stop - Mengontrol apakah scroll melewati item
â€ĸ scroll-margin/scroll-padding - Menyesuaikan area snap

🛠ī¸ Features

scroll-implement.css
/* Full page scroll */
html {
  scroll-snap-type: y proximity;
}

section {
  scroll-snap-align: start;
  height: 100vh;
}

/* Image carousel */
.carousel {
  scroll-snap-type: x mandatory;
  display: flex;
  overflow-x: auto;
}

.carousel img {
  scroll-snap-align: center;
  min-width: 100%;
}

ℹī¸ Browser Support

CSS Scroll Snap didukung di Chrome 69+, Firefox 68+, Safari 11+, Edge 79+. Beberapa properti baru mungkin memerlukan prefix -webkit- untuk Safari.

📊 Basic Tables

scroll-values.css
/* scroll-snap-type Values */
none /* Default, no snapping */
x /* Horizontal axis */
y /* Vertical axis */
block /* Logical block axis */
inline /* Logical inline axis */
both /* Both axes */

/* scroll-snap-align Values */
none /* Default */
start /* Snap to start edge */
end /* Snap to end edge */
center /* Snap to center */

📝 Penjelasan Detail:

â€ĸ Mandatory vs Proximity - Mandatory selalu snap, proximity hanya saat dekat
â€ĸ Axis Options - Kontrol arah scroll (x, y, block, inline)
â€ĸ Alignment Points - start, center, end menentukan posisi snap
â€ĸ Scroll Behavior - smooth scroll bisa dikombinasikan

🚀 Advanced Table

advanced-scroll.css
/* Custom scroll padding */
.scroll-container {
  scroll-padding: 20px;
  scroll-snap-type: y mandatory;
}

/* Force stop on each item */
.scroll-item {
  scroll-snap-stop: always;
  scroll-margin: 20px;
}

/* Sticky headers with snap */
section {
  scroll-snap-align: start;
}

h2 {
  position: sticky;
  top: 0;
  background: #9333ea;
}

ℹī¸ Advanced Support

Properti seperti scroll-snap-stop dan scroll-padding memiliki dukungan yang lebih baru (Chrome 75+, Firefox 98+, Safari 15+).

💡 Pro Tips

đŸŽ¯ Best Practices

Gunakan scroll-snap dengan bijak untuk meningkatkan UX, bukan sekadar efek. Pastikan konten mudah diakses dengan keyboard dan touch.

best-practices.css
/* ✅ Good - Accessible scroll snap */
.scroll-container {
  scroll-snap-type: y mandatory;
  overflow-y: auto;
  scroll-behavior: smooth;
}

.scroll-item {
  scroll-snap-align: start;
  scroll-margin-top: 60px; /* Account for sticky header */
}

/* ❌ Avoid - Too aggressive snapping */
body {
  scroll-snap-type: y mandatory;
}

* {
  scroll-snap-align: start;
}

📝 Penjelasan Detail:

â€ĸ Gunakan secara selektif - Hanya untuk komponen yang membutuhkan
â€ĸ Perhatikan aksesibilitas - Pastikan navigasi keyboard tetap bekerja
â€ĸ Kombinasikan dengan smooth scroll - Untuk pengalaman lebih natural
â€ĸ Hindari overuse - Tidak semua halaman perlu scroll snap
â€ĸ Test di berbagai device - Perilaku bisa berbeda di touch vs mouse