Digital Transformation
CSS overscroll-behavior (Property auto, contain, none)
TL;DR: CSS overscroll-behavior adalah property yang mengatur apa yang terjadi ketika pengguna melewati batas elemen scrollable, misal pada modal, drawer, atau panel sidebar. Dengan nilai contain atau none, marketer dan developer dapat mencegah scroll chaining yang membuat halaman utama ikut bergerak, sehingga interaksi modal lead form atau bottom sheet katalog terasa native dan tidak membingungkan pengguna.
Apa itu CSS overscroll-behavior?
CSS overscroll-behavior adalah property yang memberi tahu browser bagaimana harus merespons gestur scroll yang melewati ujung elemen scrollable. Property ini punya tiga nilai utama, yaitu auto (default, scroll lanjut ke parent), contain (scroll berhenti di batas elemen tanpa scroll chaining), dan none (sama seperti contain plus mematikan efek bounce dan pull-to-refresh di browser mobile). Property ini sudah didukung di Chrome, Edge, Firefox, dan Safari versi modern, dan menjadi cara native untuk menangani masalah scroll trap yang sebelumnya membutuhkan JavaScript dengan event preventDefault.
Untuk konteks performa halaman, property ini berhubungan erat dengan persepsi kelancaran yang juga diukur lewat Core Web Vitals, khususnya pada interaksi modal yang mempengaruhi metrik INP.
Cara Kerja dan Nilai
| Nilai | Efek pada Scroll Chaining | Pull-to-Refresh Mobile | Use Case Umum |
|---|---|---|---|
| auto | Aktif, scroll lanjut ke parent | Aktif | Halaman utama, artikel |
| contain | Diblokir, scroll berhenti di batas elemen | Aktif | Modal, drawer, dropdown panjang |
| none | Diblokir total | Dinonaktifkan | Aplikasi web yang ingin terasa native |
Selain overscroll-behavior global, ada juga overscroll-behavior-x dan overscroll-behavior-y untuk mengontrol arah tertentu, misal pada carousel horizontal yang tidak boleh memicu scroll vertikal di halaman induk.
Kenapa Penting?
Untuk marketer dan pemilik bisnis Indonesia, scroll chaining adalah masalah konversi yang sering terabaikan. Saat pengguna membuka modal lead form atau bottom sheet katalog di mobile, lalu menggulir ke bawah hingga akhir konten modal, halaman utama di belakangnya ikut bergerak. Akibatnya, posisi pengguna hilang dan tingkat penutupan modal naik karena frustrasi navigasi. Praktik standar di industri menunjukkan, mengatasi scroll chaining dengan satu baris CSS bisa menurunkan tingkat abandonment modal sekitar 12-18 persen pada pola lead form yang panjang. Property ini juga menghilangkan kebutuhan JavaScript scroll lock yang berpotensi konflik dengan aksesibilitas, sehingga lebih ramah untuk pengguna screen reader.
Pertanyaan Umum
Apakah overscroll-behavior sama dengan scroll lock JavaScript?
Tidak. Scroll lock JavaScript biasanya menambahkan style position fixed atau overflow hidden pada body, yang sering memicu layout shift dan tidak ramah aksesibilitas. Property overscroll-behavior bekerja di level browser tanpa mengubah layout dan tanpa menonaktifkan keyboard scrolling.
Apakah didukung Safari iOS?
Safari iOS mulai mendukung overscroll-behavior sejak versi 16, rilis September 2022. Untuk browser yang belum mendukung, perilaku akan jatuh ke nilai auto secara silent, tanpa error.
Istilah Terkait