Metode penetrasi gulir HTML5

Situs web perlu diadaptasi di sisi seluler. Untuk H5 seluler dan sisi web, solusi tata letak fleksibel seperti bluma digunakan.

Daftar yang digunakan di H5 menggunakan react-virtualized untuk menggambar tabel

Untuk menampilkan detail spesifik dari satu baris data dalam tabel, solusi yang biasa dilakukan adalah menggunakan halaman baru atau jendela pop-up.

Solusi jendela pop-up digunakan di sini. Detail data setelah mengklik satu baris data menggunakan kartu modal bluma.

Untuk detail dan contoh spesifik, silakan merujuk ke: https://bulma.io/documentation/components/modal/

Setelah mengklik satu baris data, jendela pop-up menampilkan data rinci, dan seluruh modal-card diatur ke position:fixed;

Tidak ada bagian footer, atur ketinggian modal-card ke ketinggian seluruh layar: 100vh

Pertunjukan:

• Saat ditampilkan di browser Chrome, seluruh kartu modal memenuhi seluruh layar.
• Tampilan di ponsel juga penuh, tapi yang jadi masalah adalah jika digerakkan sesuai gestur, bagian kotak pencarian di browser akan terdorong ke atas. Saat ini, halaman daftar data di bawah jendela pop-up bisa digeser, dan kemudian judul jendela pop-up akan menutupi bagian kotak Pencarian browser asli, tetapi ada penundaan di antara ini, Anda dapat melihat dengan jelas data pada halaman di bawah
• Akan ada tampilan lain di ponsel lain, jika kecepatan gesernya relatif cepat dan Anda langsung menggesernya setelah jendela pop-up muncul, Anda akan melihat ruang kosong kecil di bagian bawah jendela pop-up di bawah jendela pop-up dapat digulir. Dan ada penundaan yang jelas dan tampilan pengguliran data.

Larutan:

JS + CSS meluap: tersembunyi

Tambahkan kelas css secara dinamis ke halaman html di bawah jendela pop-up melalui JS

 if ($modalButtons.length > 0) { $modalButtons.forEach(function ($el) { $el.addEventListener('click', function () { var target = $el.dataset.target; openModal(target); } ); });}fungsi openModal(target) { var $target = document.getElementById(target); rootEl.classList.add('terpotong'); $target.classList.add('sedang aktif');}

 terpotong { overflow:hidden!important}

Saat jendela pop-up ditutup, hapus kelas css halaman tersebut melalui JS: terpotong

 function closeModals() { rootEl.classList.remove('is-cliped'); $modals.forEach(function ($el) { $el.classList.remove('is-active'); });}

Namun setelah menguji solusi ini di aplikasi, ternyata tidak menyelesaikan masalah, dan masalah di atas masih terjadi.

Posisi JS + CSS: tetap + scrollTop

Ide rencana:

1. Saat jendela pop-up muncul, atur posisi html menjadi tetap. Setelah menutup jendela pop-up, batalkan atribut posisi html.
2. Karena halaman daftar akan bergulir, dan baris yang diklik mungkin muncul setelah pengguliran terjadi, nilai scrollTop dari halaman html itu sendiri perlu dihitung.
3. Karena setelah mengatur posisinya menjadi tetap ketika jendela pop-up muncul, nilai scrollTop halaman html akan menjadi 0 dan kembali ke bagian atas halaman. Oleh karena itu, setelah menutup jendela pop-up, Anda perlu mengaturnya secara manual scrollTop nilai halaman html untuk memungkinkannya menggulir ke posisi asli halaman html.
4. Untuk kompatibilitas, Anda perlu menyetel nilai scrollTop dari properti yang berbeda

Sebelum jendela pop-up:

 const scrollTop = global.document.documentElement.scrollTop ||. global.pageYOffset ||. global.document.body.scrollTop;global.document.documentElement.style.position = 'diperbaiki';this.scrollTop = scrollTop;

Tutup jendela pop-up:

 closeModalHandler = () => { const { closeOrderHistoryModal } = ini.props; global.document.documentElement.style.position = ''; global.pageYOffset = ini.scrollTop; .document.body.scrollTop = ini.scrollTop; closeOrderHistoryModal();}

Di atas adalah keseluruhan isi artikel ini, saya harap dapat bermanfaat untuk pembelajaran semua orang. Saya juga berharap semua orang mendukung VeVb Wulin Network.