Bagaimana Anda akan menggunakan scrollbar-gutter untuk mencegah layout shift yang disebabkan oleh scrollbar?

Pertanyaan dan skenario

Halaman ini menggunakan overflow: auto: sebelum interaksi tidak ada overflow, kemudian scrollbar klasik muncul. Karena memakan ruang inline, konten yang berada di tengah akan bergeser. Jelaskan desain CSS, batas-batasnya, perilaku fallback, dan validasi yang dapat diukur.

Apa yang sedang diuji oleh pewawancara

• Apakah Anda mengetahui bahwa scrollbar-gutter berlaku untuk kotak scrolling dan tidak diwariskan (inherited).
• Apakah Anda dapat membedakan scrollbar klasik dan overlay serta menjelaskan stable versus both-edges.
• Apakah Anda memahami perbedaan cakupan antara root, body, dan scroller bersarang.
• Apakah rencana mencakup penguncian modal, RTL, browser lama, dan pemantauan CLS.

Pertanyaan klarifikasi untuk diajukan terlebih dahulu

Pastikan apakah lompatan terjadi di viewport atau scroller bagian dalam, apakah sistem operasi menggunakan overlay scrollbar, apakah RTL diperlukan, bagaimana modal mengunci scrolling halaman, serta target browser dan aksesibilitas mana yang penting. Tanyakan apakah tata letak harus tetap berada di tengah secara geometris atau hanya menghindari pergeseran satu sisi saat overflow dimulai.

Kerangka jawaban 30 detik

Saya akan menempatkan scrollbar-gutter: stable pada kotak scrolling yang sebenarnya sehingga ruang scrollbar klasik tersedia sebelum dan sesudah overflow; gunakan stable both-edges jika perataan tengah yang simetris penting. Konfigurasikan root untuk scrolling viewport dan setiap panel bagian dalam untuk scrolling-nya sendiri. Overlay scrollbar umumnya tidak memakan ruang tata letak, jadi tidak ada lebar tetap yang perlu direservasi. Buat penguncian modal, RTL, dan fallback lawas tetap eksplisit, lalu validasi dengan instrumentasi layout-shift dan matriks perangkat nyata.

Pembahasan mendalam langkah demi langkah

1. Identifikasi kotak scrolling. Root mengontrol scrolling viewport; deklarasi body bukanlah pengganti perilaku root. Panel yang melakukan scrolling secara independen memerlukan deklarasinya sendiri.
2. Pilih nilainya. stable mereservasi ruang inline untuk scrollbar klasik; both-edges menambahkan gutter yang sama di tepi yang berlawanan untuk mempertahankan posisi tengah secara geometris.
3. Pahami overlay. Overlay scrollbar berada di atas konten dan biasanya tidak memakan ruang tata letak. Agen pengguna (UA) dan sistem operasi memilih modenya; CSS tidak dapat memaksakan scrollbar klasik.
4. Koordinasikan modal. Gunakan satu state machine untuk mengunci dan memulihkan scroll halaman. Hindari menambahkan padding-right tanpa syarat di atas gutter yang sudah direservasi oleh browser. Konfigurasikan scroller internal modal secara terpisah.
5. Cakup kompatibilitas dan RTL. Gunakan tepi inline logis pada browser modern, pertahankan fallback minimal untuk lingkungan lama, dan uji arah, sisi scrollbar, serta safe area.
6. Ukur hasilnya. Rekam entri performa layout-shift, bedakan pergeseran sebelum dan sesudah input pengguna, serta gabungkan pengujian lab untuk daftar panjang, modal, dan jaringan lambat dengan data field p75. Target CLS yang baik adalah p75 pada atau di bawah 0.1.

Contoh jawaban berkualitas tinggi

Saya akan mendeklarasikannya pada kotak yang benar-benar melakukan scroll:

html {
  scrollbar-gutter: stable both-edges;
}

.results-pane {
  overflow: auto;
  scrollbar-gutter: stable;
}

stable menjaga ruang scrollbar klasik tetap ada tanpa overflow; both-edges menjaga tata letak yang berpusat pada viewport tetap simetris. Jika sistem menggunakan overlay scrollbar, komponen tersebut sudah tidak memakan ruang tata letak, sehingga saya tidak akan menjanjikan reservasi piksel tetap. Saat membuka modal, saya tidak akan menambahkan kompensasi lebar scrollbar lainnya tanpa syarat; state machine penguncian dan kebijakan gutter harus selaras, sementara scroller internal modal dikonfigurasi secara independen.

Saya akan memverifikasi root versus body, scroller bersarang, RTL, pemulihan setelah ditutup, fallback browser lama, dan preferensi reduced-motion. Saya akan mengumpulkan entri layout-shift dan field p75 CLS, dengan target p75 CLS pada atau di bawah 0.1. MDN dan spesifikasi W3C mendefinisikan semantik properti; web.dev menyediakan model pengukuran CLS.

Kesalahan umum

• Menempatkan scrollbar-gutter pada parent biasa tanpa memeriksa elemen mana yang benar-benar melakukan scroll.
• Mengasumsikan bahwa deklarasi body pasti mengontrol viewport dan mengabaikan perilaku root.
• Menjanjikan reservasi piksel tetap untuk overlay scrollbar.
• Mengaktifkan stable sekaligus menambahkan padding-right tanpa syarat, menciptakan ruang ganda saat modal terbuka.
• Hanya menguji pada satu sistem operasi dan screenshot tanpa RTL, tanpa mengukur CLS atau panel bagian dalam.

Pertanyaan lanjutan dan tanggapannya

Mengapa menggunakan both-edges?

stable satu sisi mereservasi tepi inline tempat scrollbar klasik dapat muncul. Jika konten berada di tengah viewport, gutter yang sama di tepi yang berlawanan mempertahankan simetri geometris; namun tetap uji RTL dan penempatan scrollbar yang berbeda.

Apakah scrollbar-gutter menyelesaikan setiap masalah penguncian scroll modal?

Tidak. Properti ini mereservasi ruang tata letak kotak scrolling; ini tidak menerapkan penangkapan fokus (focus trapping), inersia latar belakang (background inertness), pemulihan posisi scroll, atau urutan penumpukan (stacking order). Hal-hal tersebut tetap menjadi tanggung jawab terpisah, dan penguncian tidak boleh menduplikasi kompensasi lebar.

Bagaimana Anda menguji overlay dan scrollbar klasik?

Gunakan setidaknya satu lingkungan scrollbar klasik dan satu lingkungan overlay scrollbar. Uji tanpa overflow, awal mula overflow, pembukaan dan penutupan modal, scrolling panel dalam, RTL, dan zoom. Rekam geometri elemen kunci dan entri layout-shift alih-alih hanya mengandalkan screenshot.