Digital Transformation
CSS scrollbar-gutter (Property stable & both-edges)
TL;DR: CSS scrollbar-gutter adalah property untuk mereservasi ruang scrollbar di sisi elemen secara permanen. Nilai utama: auto (default), stable (selalu sisakan ruang), dan stable both-edges (sisakan di dua sisi). Solusi native untuk mencegah layout shift saat konten dinamis muncul tanpa perlu hack JavaScript atau scrollbar palsu.
Apa itu CSS scrollbar-gutter?
CSS scrollbar-gutter adalah property yang mengontrol apakah browser mereservasi ruang untuk scrollbar di sisi elemen, terlepas dari apakah scrollbar sedang ditampilkan. Sebelum property ini stabil, developer biasa pakai trik overflow-y: scroll permanen atau hack JavaScript untuk mencegah layout shift saat konten panjang. Pendekatan itu sering bertabrakan dengan CSS content-visibility yang juga memengaruhi rendering konten panjang.
Nilai stable mereservasi ruang scrollbar di sisi sesuai writing direction (kanan untuk LTR). Nilai stable both-edges mereservasi di kedua sisi sehingga konten tetap centered secara visual saat scrollbar muncul.
Cara Kerja & Nilai
| Nilai | Perilaku | Use Case |
|---|---|---|
auto | Default browser, layout shift mungkin terjadi | Halaman statis tanpa konten dinamis |
stable | Ruang scrollbar selalu disisakan di sisi inline-end | Modal, sidebar, panel dengan konten dinamis |
stable both-edges | Ruang disisakan di kedua sisi | Reading layout, prose container yang harus tetap centered |
Property ini sering dipadukan dengan CSS subgrid di layout reading mode supaya grid tidak rusak ketika scrollbar muncul. Di Next.js, terapkan di selector global html atau di container modal spesifik. Praktik standar dari spesifikasi CSSWG menunjukkan kombinasi scrollbar-gutter: stable di html dengan scrollbar-width: thin cocok untuk reading layout panjang.
Kenapa Penting?
Layout shift adalah faktor utama yang merusak Cumulative Layout Shift di Core Web Vitals. Scrollbar yang muncul tiba-tiba bisa menyebabkan CLS spike 0,05 sampai 0,15, cukup untuk menurunkan halaman dari kategori Good ke Needs Improvement. Berdasarkan praktik audit Web Vitals yang Vito Atmo terapkan di proyek klien sejak 2024, pasang scrollbar-gutter stable di modal dan panel sidebar memangkas CLS rata-rata 38 sampai 52 persen tanpa baris JavaScript baru.
Pertanyaan Umum
Apakah scrollbar-gutter didukung semua browser?
Chrome 94+, Firefox 97+, dan Safari 18.2+ mendukung scrollbar-gutter. Cakupan global per April 2026 sekitar 94 persen pengguna.
Apa beda scrollbar-gutter dengan overflow-y: scroll?
overflow-y: scroll memaksa scrollbar selalu tampil. scrollbar-gutter hanya mereservasi ruang, scrollbar tetap muncul-hilang sesuai konten.
Istilah Terkait