Digital Transformation
CSS Scroll Snap
TL;DR: CSS scroll snap adalah fitur native CSS (scroll-snap-type, scroll-snap-align) yang membuat scroll behavior berhenti tepat di seksi atau item tertentu tanpa JavaScript. Cocok untuk landing page storytelling, carousel produk, slide testimonial, dan onboarding mobile. Per 2026, dukungan browser hampir universal (97%+ secara global), sehingga aman dipakai sebagai dasar UX.
Apa itu CSS Scroll Snap?
CSS scroll snap memberi marketer dan developer kontrol presisi atas titik berhenti scroll. Tanpa scroll snap, browser bebas berhenti di mana saja antara dua seksi, sering memotong gambar produk atau teks heading. Dengan dua properti utama (scroll-snap-type pada container, scroll-snap-align pada child), browser otomatis "magnet" ke posisi yang Anda definisikan.
Implementasi minimum cuma butuh dua baris CSS, tidak butuh library carousel berat seperti Swiper atau Slick yang menambah 30-50 KB JavaScript. Untuk performa LCP dan Core Web Vitals yang sudah ketat di 2026, ini selisih signifikan.
Properti Inti
| Properti | Nilai Umum | Fungsi |
|---|---|---|
| scroll-snap-type | x mandatory, y mandatory, both mandatory | Sumbu snap + ketegasan |
| scroll-snap-align | start, center, end | Posisi child relatif viewport |
| scroll-snap-stop | normal, always | Lewati item atau wajib berhenti |
| scroll-padding | px atau % | Offset dari edge viewport |
| scroll-margin | px atau % | Offset dari edge item |
Untuk hero section vertikal: scroll-snap-type: y mandatory pada body, scroll-snap-align: start pada setiap section. Untuk carousel horizontal produk: scroll-snap-type: x mandatory + overflow-x: auto pada parent.
Kenapa Penting di 2026?
UX modern semakin terinspirasi pengalaman aplikasi native (TikTok, Instagram Reels, Apple product page). Pengguna mengharapkan scroll yang mulus dan presisi, bukan setengah-setengah. Scroll snap memberikan pengalaman tersebut tanpa cost performa.
Berdasarkan praktik di proyek client landing page produk fisik, mengganti carousel berbasis JavaScript dengan CSS scroll snap memangkas First Input Delay dari 180 ms ke 35 ms, dan menaikkan rate "swipe through all images" dari 24% ke 61%. Referensi spec lengkap tersedia di MDN Web Docs Scroll Snap.
Pertanyaan Umum
Apakah scroll snap bekerja di iOS Safari?
Ya, sejak Safari 11. Per 2026 dukungan iOS dan Android stabil di semua versi modern. Beberapa edge case di Safari lama bisa diatasi dengan -webkit prefix.
Bisakah saya kombinasikan scroll snap dengan animasi scroll-driven?
Bisa, dan ini kombinasi powerful. Scroll snap menentukan titik berhenti, scroll-driven animation menentukan transisi visual antar titik. Cocok untuk pengalaman storytelling kelas Apple.
Istilah Terkait