1. Metode untuk menghapus bilah gulir
Tambahkan saja overflow: atribut tersembunyi ke tubuh. Ini tidak akan berlaku di bawah IE6 dan 7. Anda perlu menambahkan overflow: atribut tersembunyi ke html
Dalam gaya, IE6, 7 dan browser lainnya perlu dibedakan oleh Hack. Ini karena ketika halaman ditarik di bawah, jika HTML atau tubuh meluap: tersembunyi, halaman di bawah lapisan bola transparan akan sebagian tersembunyi secara normal. Greyscale terlihat melalui tampilan transparan, warna spesifik terkait dengan warna latar belakang yang ditetapkan oleh platform dan pengguna.
Setelah melepas scrollbar di tubuh atau HTML, halaman akan memiliki lebar scrollbar/2 lompatan! Lompatan ini sangat buruk untuk pengalaman pengguna, jadi tambahkan bantalan yang tepat ke tubuh, ukurannya adalah lebar bilah gulir. Lebar bilah gulir di bawah platform Windows adalah 17px. Lebar batang gulir dari gulir yang berbeda di bawah platform Linux tidak konsisten. Anda dapat menggunakan kode yang relevan untuk menghitung lebar bilah gulir. Berikut ini adalah contoh platform Windows.
Kode terkait:
document.documentelement.style.csStext = 'overflow: none;+overflow: tersembunyi; _overflow: tersembunyi;'; document.body.style.csstext = 'overflow: tersembunyi;+overflow: tidak ada; _overflow: tidak ada; padding: 0 17px 0 0;';
Kode di atas tidak mempertimbangkan apakah HTML atau tubuh memiliki gaya inline. Jika HTML atau tubuh memiliki gaya inline, itu perlu diakumulasikan, jika tidak gaya aslinya akan dibersihkan.
2. Metode lain untuk menghilangkan bahaya tersembunyi menggulir halaman (mencegah kesalahan operasi)
Setelah menyembunyikan scrollbar, menggulir halaman dengan roda mouse tidak akan bergerak. Saya pikir itu baik -baik saja, bukan ...
Pintasan keyboard juga dapat mengoperasikan beberapa operasi browser, terkait dengan pengguliran halaman, seperti: tombol naik dan turun, tombol belok halaman, dll. Untuk pintasan keyboard, mereka perlu dibatalkan.
3. Tambahkan gaya lapisan pop-up
Tambahkan gaya global ke tubuh (kompatibel dengan IE6)
Tinggi: 100%;
Tambahkan Gaya Gulir ke Lapisan Bullet
overflow-y: auto; lebar: 100%; tinggi: 100%; kiri: 0; _padding: 0 17px 0 0; // bug IE6, bantalan elemen induk masih berlaku setelah elemen anak benar -benar diposisikan
Artikel di atas pada topeng lapisan pop-up JS dan analisis optimasi bilah latar belakang scroll detail optimasi adalah semua konten yang saya bagikan dengan Anda. Saya harap Anda dapat memberi Anda referensi dan saya harap Anda dapat mendukung wulin.com lebih lanjut.