Scroll snap bikin area yang bisa digeser berhenti rapi di titik tertentu, bukan di sembarang tempat. Kayak Instagram Stories: tiap kali kamu geser, tampilannya langsung nempel pas di story berikutnya. Semuanya cukup pakai CSS, tanpa JavaScript.
🧪 Tebakan cepat: properti snap ditaruh di kotak yang di-scroll, di tiap slide, atau di dua-duanya? Tebak dulu, jawabannya ada di bagian "Galeri yang berhenti rapi".
Galeri yang berhenti rapi
<div class="gallery">
<div class="slide">Slide 1</div>
<div class="slide">Slide 2</div>
<div class="slide">Slide 3</div>
</div>
<style>
.gallery {
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
}
.slide {
flex: 0 0 70%;
scroll-snap-align: start;
}
</style>
.galleryadalah kotak yang di-scroll.display: flexmenjajarkan slide ke samping,overflow-x: autobikin dia bisa digeser ke samping.scroll-snap-type: x mandatorydi kotak itu menyalakan snap.xartinya sumbu horizontal (ke samping),mandatoryartinya wajib: tiap kali geseran berhenti, galeri selalu nempel ke titik snap.flex: 0 0 70%bikin tiap slide selebar 70% galeri dan gak menyusut.scroll-snap-align: startdi tiap slide menentukan titik nempelnya: tepi awal (kiri) slide nempel ke tepi kiri galeri.
Hasilnya, geser sedikit lalu lepas, galeri meluncur sendiri sampai satu slide pas di tepi kiri. Gak ada lagi slide yang kepotong setengah di kiri.
Jawaban tebakan: dua-duanya, tapi propertinya beda. Kotak yang di-scroll memegang scroll-snap-type, tiap anaknya memegang scroll-snap-align. Kalau salah satunya gak ada, snap gak terasa apa-apa.
Pilihan nilainya
scroll-snap-type, ditulis di kotak yang di-scroll:
xbuat geser ke samping,ybuat geser ke bawah,bothbuat dua arah.mandatoryselalu nempel.proximitycuma nempel kalau berhentinya sudah dekat titik snap.
scroll-snap-align, ditulis di tiap anak:
start: tepi awal nempel. Itu tepi kiri buatx, tepi atas buaty.center: tengah anak nempel ke tengah kotak.end: tepi akhir nempel.
Snap ke bawah
.feed {
height: 300px;
overflow-y: auto;
scroll-snap-type: y mandatory;
}
.post {
height: 300px;
scroll-snap-align: center;
}
Caranya sama, cuma sumbunya y dan kotaknya pakai overflow-y: auto. Daftarnya digeser ke bawah, dan tiap .post berhenti pas di tengah .feed, kayak feed video yang sekali geser pindah satu video.
⚠️ Jebakan yang sering ketemu
- Properti ketuker.
scroll-snap-aligndi kotak yang di-scroll, atauscroll-snap-typedi slide, gak ngapa-ngapain. - Sumbu gak cocok. Galeri yang digeser ke samping butuh
x.y mandatorydi galeri horizontal gak berpengaruh. - Kotak yang gak bisa di-scroll. Tanpa
overflow: autodan isi yang lebih panjang dari kotaknya, gak ada yang digeser, jadi gak ada yang di-snap. - Header sticky menutupi slide.
scroll-padding-top: 60pxdi kotak yang di-scroll menggeser titik snap ke bawah header.
TL;DR: Scroll snap bikin scroll berhenti rapi. Kotak yang di-scroll butuh overflow: auto dan scroll-snap-type, misalnya x mandatory buat ke samping atau y mandatory buat ke bawah. Tiap anaknya butuh scroll-snap-align: start, center, atau end. mandatory selalu nempel, proximity cuma kalau sudah dekat.
