Digital Transformation
CSS ::scroll-marker (Pseudo-element)
TL;DR: CSS ::scroll-marker adalah pseudo-element baru yang menghasilkan satu marker per item di scroll container, lengkap dengan state aktif yang mengikuti posisi scroll. Hasil akhirnya mirip dot navigation carousel, tetapi tanpa library JavaScript. Per April 2026 fitur ini sudah mendarat di Chrome stable di belakang flag prefers-experimental, lalu menjadi default di Chrome 128.
Apa itu CSS ::scroll-marker?
CSS ::scroll-marker adalah pseudo-element yang muncul otomatis di dalam scroll container untuk setiap snap target. Marker bisa di-style seperti tombol atau titik, dan secara native menerima fokus keyboard dan click. Property pendamping ::scroll-marker-group membungkus seluruh marker di luar scroll area. Untuk konteks animasi pengguliran, lihat juga CSS scroll-snap dan Core Web Vitals.
Analoginya seperti halte di rute bus. Tiap kali bus (scroll) mendekati halte, indikator halte aktif menyala. Pengguna tahu sudah sampai mana tanpa membaca papan jalan.
Cara Pakai
| Selector | Fungsi |
|---|---|
::scroll-marker | Marker per item, otomatis dibuat |
::scroll-marker-group | Container marker, biasanya diposisikan absolute |
:target-current | State aktif yang menempel pada marker terdekat |
Contoh CSS singkat:
.carousel { scroll-snap-type: x mandatory; }
.carousel > * { scroll-snap-align: center; }
.carousel::scroll-marker-group { display: flex; gap: 8px; }
.carousel > *::scroll-marker { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #ccc; }
.carousel > *::scroll-marker:target-current { background: #111; }
Kenapa Penting?
Untuk landing page produk atau gallery portfolio yang memakai carousel, marker selama ini diimplementasikan dengan plugin seperti Swiper atau Splide. Pemakaian ::scroll-marker memangkas 8 sampai 25 KB JavaScript, mempercepat skor Core Web Vitals, dan tetap accessible by default.
Pertanyaan Umum
Apakah ::scroll-marker accessible?
Ya. Browser memperlakukan setiap marker sebagai elemen interaktif dengan fokus keyboard, peran tombol implisit, dan dukungan screen reader.
Apa fallback untuk Safari atau Firefox lama?
Browser tanpa dukungan akan mengabaikan pseudo-element. Sediakan tombol pagination tradisional sebagai progressive enhancement, lalu sembunyikan ketika @supports selector(::scroll-marker) true.
Istilah Terkait