Digital Transformation
CSS scroll-snap-stop (Property always & normal)
TL;DR: CSS scroll-snap-stop adalah property yang melengkapi scroll-snap-type dengan dua nilai: always memaksa browser berhenti di setiap snap point meski user scroll cepat, normal mengizinkan browser melewati snap point. Berguna untuk carousel produk, onboarding modal, atau testimonial slider yang tidak boleh dilewati user.
Apa itu CSS scroll-snap-stop?
Property scroll-snap-stop dipasang di child element scroll container, bersama dengan scroll-snap-align. Tanpa property ini, browser akan men-skip beberapa snap point saat user flick scroll dengan kecepatan tinggi. Ini menambah lapisan kontrol di atas CSS Scroll-Driven Animations dan menyempurnakan UX pada carousel.
Mirip CSS Subgrid, scroll-snap-stop adalah primitive kecil tapi mengganti puluhan baris JavaScript untuk implementasi yang sama.
Sintaks Dasar
.carousel {
scroll-snap-type: x mandatory;
overflow-x: auto;
}
.carousel > .card {
scroll-snap-align: start;
scroll-snap-stop: always; /* atau normal */
}
| Nilai | Perilaku |
|---|---|
normal | Default. Browser bebas skip snap point saat scroll cepat |
always | Browser wajib berhenti di setiap snap point, tidak bisa di-skip |
Kapan Pakai always vs normal
- always: carousel produk e-commerce, onboarding tutorial, testimonial yang penting tiap slide-nya dilihat
- normal: feed konten panjang, gallery foto yang user mau cepat-cepat lewati
Kenapa Penting?
Untuk landing page bisnis Indonesia, scroll-snap-stop bisa naikkan engagement carousel sampai 20 sampai 35 persen, karena user tidak bisa "skip" testimoni atau benefit penting. Praktik standar di industri menunjukkan, kombinasi scroll-snap-stop: always dengan scroll-snap-align: center menghasilkan dwell time per kartu yang lebih panjang (Sumber: MDN Web Docs scroll-snap-stop).
Pertanyaan Umum
Apakah scroll-snap-stop didukung semua browser?
Per April 2026, Baseline Widely Available. Chrome, Edge, Safari, Firefox semua mendukung. Tidak perlu polyfill.
Apakah scroll-snap-stop menggantikan library carousel seperti Swiper?
Tidak sepenuhnya. Untuk carousel sederhana, scroll-snap-stop cukup. Untuk carousel kompleks dengan navigation arrow custom, library masih perlu, tapi bisa dipangkas drastis.
Istilah Terkait