Bagaimanakah anda akan menggunakan scrollbar-gutter untuk mengelakkan anjakan susun atur (layout shift) akibat bar skrol?

Soalan dan senario

Halaman ini menggunakan overflow: auto: sebelum interaksi tiada limpahan, kemudian bar skrol klasik muncul. Oleh kerana ia menggunakan ruang sebaris (inline space), kandungan yang berada di tengah akan berganjak. Terangkan reka bentuk CSS, sempadannya, tingkah laku sandaran, dan pengesahan yang boleh diukur.

Perkara yang diuji oleh penemu duga

• Sama ada anda tahu bahawa scrollbar-gutter diguna pakai pada kotak penskrolan dan tidak diwarisi.
• Sama ada anda boleh membezakan bar skrol klasik dan tindanan (overlay) serta menerangkan stable berbanding both-edges.
• Sama ada anda memahami perbezaan skop antara punca (root), body, dan skroler bersarang.
• Sama ada pelan tersebut merangkumi penguncian modal, RTL, pelayar lama, dan pemantauan CLS.

Soalan penjelasan untuk ditanya terlebih dahulu

Sahkan sama ada lompatan itu berlaku dalam viewport atau skroler dalaman, sama ada sistem pengendalian menggunakan bar skrol tindanan, sama ada RTL diperlukan, cara modal mengunci penskrolan halaman, dan pelayar serta sasaran kebolehcapaian yang mana penting. Tanya sama ada susun atur mesti kekal di tengah secara geometri atau hanya mengelakkan pergerakan sebelah pihak apabila limpahan bermula.

Rangka kerja jawapan 30 saat

Saya akan meletakkan scrollbar-gutter: stable pada kotak penskrolan sebenar supaya ruang bar skrol klasik wujud sebelum dan selepas limpahan; gunakan stable both-edges apabila penjajaran tengah yang simetri penting. Konfigurasikan punca untuk penskrolan viewport dan setiap panel dalaman untuk penskrolannya sendiri. Bar skrol tindanan secara umumnya tidak menggunakan ruang susun atur, jadi tiada lebar tetap untuk diperuntukkan. Pastikan penguncian modal, RTL, dan sandaran legasi sentiasa eksplisit, kemudian sahkan dengan instrumentasi anjakan susun atur dan matriks peranti sebenar.

Analisis mendalam langkah demi langkah

1. Kenal pasti kotak penskrolan. Punca mengawal penskrolan viewport; pengisytiharan body bukan pengganti tingkah laku punca. Panel yang menatal secara bebas memerlukan pengisytiharannya sendiri.
2. Pilih nilai. stable memperuntukkan ruang sebaris untuk bar skrol klasik; both-edges menambah longkang (gutter) yang sama pada bahagian tepi bertentangan untuk mengekalkan kedudukan tengah secara geometri.
3. Fahami tindanan (overlays). Bar skrol tindanan berada di atas kandungan dan biasanya tidak menggunakan ruang susun atur. Ejen pengguna dan sistem pengendalian memilih mod tersebut; CSS tidak boleh memaksa bar skrol klasik.
4. Selaraskan modal. Gunakan satu mesin keadaan (state machine) untuk mengunci dan memulihkan skrol halaman. Elakkan daripada menambah padding-right tanpa syarat di atas longkang yang telah diperuntukkan oleh pelayar. Konfigurasikan skroler dalaman modal secara berasingan.
5. Liputi keserasian dan RTL. Gunakan tepi sebaris logik dalam pelayar moden, kekalkan sandaran minimum untuk persekitaran lama, dan uji arah, kedudukan sisi bar skrol, serta kawasan selamat (safe areas).
6. Ukur hasilnya. Rekod entri prestasi layout-shift, bezakan anjakan sebelum dan selepas input pengguna, dan gabungkan ujian makmal untuk senarai panjang, modal, dan rangkaian perlahan dengan data p75 lapangan. Sasaran CLS yang baik ialah p75 pada atau di bawah 0.1.

Contoh jawapan berkualiti tinggi

Saya akan mengisytiharkannya pada kotak yang benar-benar menatal:

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

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

stable memastikan ruang bar skrol klasik kekal wujud tanpa limpahan; both-edges memastikan susun atur yang berada di tengah viewport kekal simetri. Jika sistem menggunakan bar skrol tindanan, ia sememangnya tidak menggunakan ruang susun atur, jadi saya tidak akan menjanjikan peruntukan piksel tetap. Apabila membuka modal, saya tidak akan menambah pampasan lebar bar skrol lain tanpa syarat; mesin keadaan penguncian dan dasar longkang mesti selaras, manakala skroler dalaman modal dikonfigurasikan secara bebas.

Saya akan mengesahkan punca berbanding body, skroler bersarang, RTL, pemulihan selepas ditutup, sandaran pelayar lama, dan keutamaan pergerakan dikurangkan (reduced-motion). Saya akan mengumpul entri layout-shift dan p75 CLS lapangan, menyasarkan p75 CLS pada atau di bawah 0.1. MDN dan spesifikasi W3C mentakrifkan semantik sifat; web.dev menyediakan model pengukuran CLS.

Kesilapan biasa

• Meletakkan scrollbar-gutter pada induk biasa tanpa menyemak elemen mana yang benar-benar menatal.
• Menganggap bahawa pengisytiharan body semestinya mengawal viewport dan mengabaikan tingkah laku punca.
• Menjanjikan peruntukan piksel tetap untuk bar skrol tindanan.
• Mendayakan stable sambil turut menambah padding-right tanpa syarat, mewujudkan ruang berganda apabila modal dibuka.
• Menguji pada satu sistem pengendalian dan tangkapan skrin tanpa RTL sahaja, tanpa mengukur CLS atau panel dalaman.

Soalan susulan dan jawapan

Mengapakah menggunakan both-edges?

stable satu sisi memperuntukkan tepi sebaris tempat bar skrol klasik boleh muncul. Jika kandungan berada di tengah viewport, longkang yang sama pada bahagian tepi bertentangan mengekalkan simetri geometri; namun tetap perlu menguji RTL dan peletakan bar skrol yang berbeza.

Adakah scrollbar-gutter menyelesaikan setiap masalah penguncian skrol modal?

Tidak. Ia memperuntukkan ruang susun atur kotak penskrolan; ia tidak melaksanakan perangkap fokus (focus trapping), ketidakaktifan latar belakang (background inertness), pemulihan kedudukan skrol, atau susunan bertindan (stacking order). Perkara tersebut kekal sebagai tanggungjawab berasingan, dan penguncian tidak boleh menduplikasi pampasan lebar.

Bagaimanakah anda menguji bar skrol tindanan dan klasik?

Gunakan sekurang-kurangnya satu persekitaran bar skrol klasik dan satu persekitaran bar skrol tindanan. Uji tiada limpahan, permulaan limpahan, pembukaan dan penutupan modal, penskrolan panel dalaman, RTL, dan zum. Rekodkan geometri elemen utama dan entri layout-shift daripada hanya bergantung pada tangkapan skrin.