Pada bilah gulir desktop klasik, halaman panjang memiliki alur, halaman pendek tidak, dan navigasi di antara keduanya akan menggeser tata letak Anda ke samping. Properti membuat reservasi eksplisit dan stabil.

html {
  scrollbar-gutter: stable;
}
/* classic overlay scrollbars keep the same rendering;
   the declaration is simply neutral there */

Mengapa tata letaknya melonjak hari ini

  • Scrollbar klasik tidak menutupi apa pun; itu menempati lebar sebenarnya, sehingga tampilannya mengubah konten dan menggeser header di tengah.
  • Pemicu yang paling umum adalah modal yang menyetel body overflow menjadi tersembunyi dan mengangkat scrollbar, lalu menutupnya kembali: dua tata letak gempa per dialog.
  • Mendesain 'area konten' hingga lebar penuh di desktop secara visual mengasumsikan tidak ada selokan, lalu kurangi satu; memperkenalkannya dalam sekali tekan gulir adalah bug yang dapat Anda temukan.

Pengaturannya

  1. stabil: selalu sediakan saluran, baik konten meluap atau tidak. Tata letak terpusat tetap ada.
  2. kedua sisi stabil: sediakan juga jalur cermin di sisi lain, untuk pemusatan optik sejati pada desain yang memerlukannya.
  3. Platform scrollbar overlay (seluler, default macOS modern) tidak menyediakan ruang, dan properti di sana gratis.

Terapkan juga pada modal penguncian badan: atur talang pada target kunci sehingga halaman tidak mengukur bilah gulir, lalu tambahkan kembali. Tiga kata CSS sebagai ganti seluruh situs yang hening, sangat gacor per karakter.