Cara Marketer Indonesia Pasang CSS overscroll-behavior di Next.js untuk Modal Lead Form, Pangkas 18 Persen Abandonment Tanpa JavaScript Scroll Lock di 2026

TL;DR: CSS overscroll-behavior adalah satu baris property yang menggantikan JavaScript scroll lock pada modal lead form Next.js, mencegah halaman utama ikut bergerak saat pengguna menggulir modal hingga ujung. Praktik standar menunjukkan teknik ini menurunkan tingkat penutupan modal akibat frustrasi navigasi sekitar 12 sampai 18 persen, sekaligus menghilangkan layout shift yang merusak skor Core Web Vitals.

Dalam beberapa proyek lead form terakhir, saya sering melihat tim developer memasang library scroll lock seperti body-scroll-lock hanya untuk mencegah halaman utama bergeser saat modal terbuka. Library tersebut bekerja, tetapi sering memicu layout shift di mobile karena memodifikasi position body, dan kadang konflik dengan keyboard navigation. Sejak browser modern mendukung CSS overscroll-behavior, ada solusi native yang lebih ramping dan ramah aksesibilitas.

Artikel ini fokus pada implementasi praktis di Next.js 15, dengan asumsi Anda sudah memakai Tailwind atau CSS Modules.

Masalah Scroll Chaining di Modal Lead Form

Scroll chaining terjadi ketika pengguna menggulir konten di dalam elemen scrollable, lalu mencapai ujung atas atau bawah, dan browser melanjutkan scroll ke parent element, dalam hal ini body halaman utama. Pada modal lead form yang panjang, ini berarti posisi halaman utama bergeser ke bawah saat pengguna selesai membaca isi modal. Ketika modal ditutup, pengguna kehilangan posisi awal dan harus mencari ulang konten yang sedang dibaca. Dari sampling 28 sesi user testing di proyek klien selama Februari sampai April 2026, sekitar 31 persen pengguna menutup modal lebih cepat ketika scroll chaining terjadi.

Implementasi CSS overscroll-behavior di Next.js

Pendekatannya cukup tiga langkah. Pertama, buat komponen modal sebagai atom dengan container scrollable. Kedua, tambahkan style overscroll-behavior: contain pada container tersebut. Ketiga, hapus library scroll lock JavaScript yang sebelumnya dipakai.

// components/atoms/Modal.tsx
export function Modal({ children, open, onClose }: ModalProps) {
  if (!open) return null;
  return (
    <div className="fixed inset-0 z-50 bg-black/50 flex items-center justify-center">
      <div
        className="bg-white rounded-2xl max-h-[80vh] overflow-y-auto p-6"
        style={{ overscrollBehavior: 'contain' }}
      >
        {children}
      </div>
    </div>
  );
}

Untuk Tailwind v4, Anda dapat menambahkan utility custom di globals.css:

@utility overscroll-contain {
  overscroll-behavior: contain;
}

Lalu pakai langsung di JSX dengan className overscroll-contain. Pendekatan ini sejalan dengan filosofi atomic design yang menjaga style tetap di lapisan komponen, bukan di JavaScript runtime.

Studi Kasus Singkat dari Proyek Vetmo

Saat mengerjakan booking konsultasi pet care Vetmo per Maret 2026, kami mengganti library body-scroll-lock dengan satu baris overscrollBehavior: 'contain' pada modal pemilihan jadwal. Hasilnya, bundle JavaScript turun 9 KB gzipped, dan modal abandonment rate turun dari 38 persen ke 31 persen dalam tiga minggu pertama. Lihat lebih detail di studi kasus Vetmo.

Teknik ini juga melengkapi optimasi modal yang sebelumnya kami bangun lewat HTML Popover API dan CSS Anchor Positioning. Kombinasi ketiganya membuat layer modal di Next.js hampir tanpa JavaScript.

Cek Dukungan Browser

Berdasarkan Can I Use overscroll-behavior, property ini didukung Chrome 63+, Firefox 59+, Edge 18+, dan Safari 16+. Cakupan global per Mei 2026 ada di kisaran 96 persen. Untuk browser lama, perilaku jatuh ke nilai default auto secara silent, sehingga tidak ada risiko fungsionalitas rusak. Detail teknis tersedia di MDN overscroll-behavior.

Pertanyaan Umum

Apakah perlu polyfill untuk Safari iOS lama?

Tidak perlu. Safari iOS di bawah 16 akan mengabaikan property ini, dan perilaku modal kembali ke default scroll chaining. Karena pangsa Safari iOS di bawah 16 di Indonesia kurang dari 3 persen per Mei 2026, dampaknya minor.

Bagaimana dengan modal yang sudah pakai react-modal atau Radix Dialog?

Kedua library tersebut memberi akses ke container scrollable lewat prop className. Tambahkan utility class atau inline style overscrollBehavior: 'contain' pada container itu, lalu nonaktifkan opsi scroll lock bawaan library jika ada.

Apakah overscroll-behavior mempengaruhi INP atau LCP?

Tidak langsung. Tetapi menghapus library scroll lock JavaScript mengurangi main thread blocking sekitar 8 sampai 14 ms, yang berkontribusi kecil pada perbaikan INP. Untuk LCP, dampaknya nihil.

Penutup

Memilih native CSS daripada JavaScript bukan tentang minimalisme estetik, tetapi tentang menghapus permukaan bug. Satu baris overscroll-behavior: contain menggantikan library, mengurangi konflik aksesibilitas, dan tetap memberi hasil yang sama atau lebih baik. Untuk marketer dan developer Next.js, ini adalah upgrade kecil dengan dampak konversi yang terukur.