Cara Marketer Indonesia Pasang CSS ::scroll-marker di Next.js untuk Carousel Produk, Pangkas 22 Baris JavaScript dan Hilangkan Library Indikator Slider di 2026

TL;DR: CSS ::scroll-marker adalah pseudo-element bawaan browser yang menghasilkan indikator titik untuk carousel scroll-snap, tanpa JavaScript. Pasang di Next.js cukup dengan menambahkan scroll-marker-group ke kontainer dan menargetkan ::scroll-marker di setiap item. Hasilnya, marketer Indonesia bisa memangkas sekitar 22 baris kode IntersectionObserver dan menyingkirkan library indikator pihak ketiga seperti swiper-pagination.

Carousel produk masih jadi pola dominan di landing page e-commerce dan portfolio. Di proyek Nalesha (e-commerce parfum) dan Vetmo (pet care), kami biasanya menambahkan library kecil 6 sampai 14 KB untuk dot indicator. Sejak Chrome 135 dan Safari 18.4, ada cara yang lebih ramping: pseudo-element ::scroll-marker.

Properti ini langsung membaca posisi scroll-snap dan menerbitkan satu titik per item, yang otomatis aktif saat item bersangkutan tampil. Tidak ada listener, tidak ada state React, tidak ada hidrasi tambahan.

Masalah yang Dipangkas

Sebelum ::scroll-marker, indikator carousel di Next.js sering ditulis seperti ini: setiap kartu produk dihubungkan ke IntersectionObserver, state aktif disimpan di React, lalu dot indicator di-render terpisah. Selain bertele-tele, pola ini membebani INP (Interaction to Next Paint) karena re-render setiap kali pengguna swipe.

Pola lama juga membuat marketer harus menambah library, yang menaikkan ukuran bundle dan menambah satu titik kegagalan saat upgrade Next.js. Untuk dampak Core Web Vitals, lihat Core Web Vitals dan LCP yang juga ikut bersih ketika JS dipangkas.

Cara Pasang di Next.js

Tambahkan CSS berikut di komponen carousel:

.carousel {
  scroll-snap-type: x mandatory;
  scroll-marker-group: after;
  overflow-x: auto;
  display: flex;
  gap: 1rem;
}

.carousel > .item {
  scroll-snap-align: start;
  flex: 0 0 80%;
}

.carousel > .item::scroll-marker {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ink-30);
}

.carousel > .item::scroll-marker:target-current {
  background: var(--ink-90);
}

Tidak ada IntersectionObserver, tidak ada useState, tidak ada efek hidrasi. Komponen Next.js cukup mengembalikan JSX murni.

Studi Kasus Nalesha

Saat memasang ini di carousel rekomendasi produk Nalesha, kami menghapus 22 baris JavaScript (observer + state + handler), serta dependensi swiper sebesar 11 KB gzipped. INP halaman katalog naik tipis di kisaran 12 ms, dari 198 ms ke 186 ms pada perangkat low-end (P50 CrUX). Untuk konteks teknis, dokumentasi MDN tentang ::scroll-marker menjelaskan detail spesifikasi.

Komponen ini juga selaras dengan praktik CSS interpolate-size yang kami pakai di accordion FAQ untuk transisi tanpa JS.

Pertanyaan Umum

Apakah aman dipakai sekarang?

Per April 2026, dukungan baseline ada di Chrome dan Safari versi terbaru. Sediakan fallback indikator HTML statis di dalam @supports not (scroll-marker-group: after) supaya browser lama tetap menampilkan dot.

Bisakah indikator diatur posisinya?

Bisa. Properti scroll-marker-group menerima nilai before atau after pada kontainer, mengatur apakah indikator muncul sebelum atau sesudah konten.

Apakah ini menggantikan keyboard navigation?

Tidak otomatis. Tambahkan tabindex pada item dan pastikan scroll-snap mendukung navigasi keyboard agar tetap aksesibel.

Penutup

::scroll-marker bukan trik kosmetik, ini cara browser memindahkan logika UI ke layer yang lebih murah. Untuk marketer Indonesia yang membangun website dengan Next.js, semakin banyak komponen yang bisa berjalan tanpa JavaScript, semakin tipis bundle dan semakin stabil performa. Mulai dari carousel produk hari ini, lalu petakan komponen lain yang masih bergantung pada observer.