Scrollbar reflowing

Pemaju MAC, Sila ambil perhatian tip ini: Pergi ke Keutamaan Sistem> Umum> Tunjukkan bar skrol dan tukar tetapan untuk sentiasa dipaparkan . Ini bukan untuk anda secara peribadi, tetapi untuk persembahan terbaik laman web. Kerana tanpa tetapan ini, anda tidak akan mengalami susun atur offset yang dicetuskan oleh bar skrol, tetapi ia akan ditemui oleh semua pengguna lain dengan tetapan ini diaktifkan. Untuk mengelakkan isu -isu prestasi sedemikian, anda harus menggunakan tetapan ini sendiri.

Stefan Judis menunjukkan bahawa penggunaan unit viewport mungkin salah satu sebab masalah ini:

100vw dalam kod menyebabkan limpahan mendatar kerana bar skrol menegak sudah wujud dan mengambil sebahagian daripada ruang. Ini terasa sangat tidak munasabah, tetapi itulah yang benar.

Stefan menunjuk kepada artikel Kilian Valkhof mengenai menangani isu ini. Penyelesaian Klasik:

Cara mudah ialah menggunakan width: 100% . Peratusan tidak mengandungi lebar bar tatal, jadi ia akan menyesuaikan diri secara automatik.

Jika anda tidak dapat melakukan ini, atau anda menetapkan lebar elemen lain, tambahkan overflow-x: hidden atau overflow: hidden pada elemen sekitar untuk mengelakkan bar scroll.

Kilian Valkhof , "Bagaimana Mencari Sebab untuk Bar Skrol Mendatar"

Saya fikir ini adalah semua yang sesuai kerana tidak ada yang memenuhi keperluan anda sepenuhnya.

Nasib baik, penyelesaian berasaskan spesifikasi akan datang tidak lama lagi. Bramus melaporkan mengenai perkara ini:

Kesan sampingan apabila memaparkan bar skrol pada halaman web ialah susun atur kandungan mungkin berubah bergantung pada jenis bar skrol. Harta CSS scrollbar-gutter (yang dikeluarkan dalam Chromium tidak lama lagi) direka untuk memberi kita pemaju lebih banyak kawalan ke atas ini.

Bramus van Damme , "Menggunakan atribut CSS scrollbar-gutter untuk mengelakkan offset susun atur yang tidak dijangka yang disebabkan oleh bar scroll"

Ini terdengar seperti penyelesaian, dan saya tidak ragu -ragu bahawa ini akan menjadi garis kod yang sangat biasa dalam reset stylesheets:

 badan {
  Scrollbar-Gutter: stabil kedua-dua edges;
}

Walau bagaimanapun, ini mengingatkan saya ... Apabila berurusan dengan isu-isu scrollbar di seluruh peringkat halaman, ia adalah harta scrollbar-gutter yang berfungsi, bukan? Daripada atribut overflow ? Harta overflow telah menjadi pelik pada masa lalu ketika datang untuk menatal aspek yang berkaitan. Bolehkah kita benar -benar melaksanakannya dalam semua pelayar? Siapa tahu. Ia kelihatan sangat mungkin, tetapi saya akan cuba menggunakannya walaupun ia dekat dan ia berkelakuan sesuai dengan spesifikasi. Rasanya sesuai untuk peningkatan progresif.

Atas ialah kandungan terperinci Scrollbar reflowing. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!