Mengelakkan menatal halaman apabila kotak modal dibuka

Pernahkah anda menemui keadaan ini: Buka kotak modal, tatal di dalamnya, tutupnya, dan halaman melompat ke lokasi lain?

Ini kerana kotak modal hanyalah elemen pada halaman, ia mungkin kekal di tempat, tetapi seluruh halaman masih berfungsi dengan baik.

Kadang -kadang ini tidak penting, seperti ketika ketinggian skrin sama persis dengan ketinggian viewport. Tetapi dalam kes lain, masalah menatal berlaku. Berita baiknya ialah kita dapat menghalangnya dengan beberapa helah CSS (dan JavaScript).

Mulakan dengan penyelesaian yang mudah

Kami dapat mengurangkan masalah menatal halaman apabila kotak modal dibuka dengan menetapkan ketinggian seluruh badan ke ketinggian pandangan penuh dan menyembunyikan limpahan menegak apabila kotak modal dibuka:

 <code>body.modal-open { height: 100vh; overflow-y: hidden; }</code>

Ini bagus, tetapi jika kita telah menatal melalui elemen halaman sebelum membuka kotak modal, akan ada penyusunan semula mendatar sedikit. Lebar viewport meningkat sebanyak kira -kira 15 piksel, yang betul -betul lebar bar skrol. Mari kita menyesuaikan badan yang betul sedikit untuk mengelakkan ini.

 <code>body { height: 100vh; overflow-y: hidden; padding-right: 15px; /* 避免寬度重排*/ }</code>

Perhatikan bahawa ketinggian kotak modal mestilah kurang daripada ketinggian viewport untuk kaedah ini berfungsi. Jika tidak, bar skrol pada badan akan diperlukan.

Apa yang perlu dilakukan di telefon bimbit?

Penyelesaian ini berfungsi dengan baik di kedua -dua desktop dan Android Mobile. Walau bagaimanapun, iOS safari memerlukan lebih banyak pemprosesan kerana badan masih menatal apabila kotak modal dibuka apabila mengklik dan bergerak pada skrin sentuh.

Kita boleh menetapkan badan ke kedudukan tetap sebagai penyelesaian:

 <code>body { position: fixed; }</code>

Tidak mengapa sekarang! Apabila menyentuh skrin, badan tidak akan bertindak balas. Walau bagaimanapun, masih terdapat masalah "kecil" di sini. Dengan mengandaikan pencetus kotak modal berada di bahagian bawah halaman, kami klik untuk membukanya. sangat bagus! Tetapi sekarang kita secara automatik menatal ke bahagian atas skrin, yang mengelirukan seperti tingkah laku menatal yang kita cuba selesaikan.

Alamak!

Oleh itu, kita perlu menggunakan JavaScript

Kita boleh menggunakan JavaScript untuk mengelakkan gelembung peristiwa sentuhan. Kita semua tahu bahawa perlu ada lapisan latar belakang apabila kotak modal dibuka. Malangnya, dalam iOS, stoppropagation agak janggal untuk bekerja dengan acara sentuhan. Tetapi pencegahanDefault berfungsi dengan baik. Ini bermakna kita perlu menambah pendengar acara kepada setiap nod DOM yang termasuk dalam kotak modal -bukan hanya pada latar belakang atau lapisan kotak modal. Berita baiknya ialah banyak perpustakaan JavaScript boleh melakukan ini, termasuk jQuery yang terbukti.

Satu lagi perkara: Bagaimana jika kita perlu menatal ke dalam kotak modal? Kami masih perlu mencetuskan tindak balas kepada acara sentuhan, tetapi kami masih perlu menghentikan menggelegak apabila ia mencapai bahagian atas atau bawah kotak modal. Ini kelihatan sangat rumit, jadi kami tidak menyelesaikan masalah sepenuhnya.

Kaedah badan tetap dipertingkatkan

Apa yang kita gunakan ialah:

 <code>body { position: fixed; }</code>

Jika kita tahu kedudukan atas menatal dan menambahkannya ke CSS kita, badan tidak menatal ke bahagian atas skrin, jadi masalahnya diselesaikan. Kita boleh menggunakan JavaScript untuk mengira bahagian atas tatal dan menambah nilai itu kepada gaya badan:

 // Apabila kotak modal dipaparkan, kita memerlukan badan tetap
document.body.style.position = 'tetap';
document.body.style.top = `-$ {window.scrolly} px`;

// Apabila kotak modal tersembunyi, kita perlu menyimpannya di bahagian atas dokumen kedudukan tatal.body.style.position = '';
document.body.style.top = '';

Ini berfungsi, tetapi masih terdapat sedikit kebocoran selepas kotak modal ditutup. Khususnya, apabila kotak modal dibuka dan badan ditetapkan untuk ditetapkan, halaman nampaknya telah kehilangan kedudukan menatalnya. Jadi kita perlu mengambil lokasi. Mari kita ubah JavaScript kami untuk menyelesaikan masalah ini.

 // Apabila kotak modal tersembunyi ...
const scrolly = document.body.style.top;
document.body.style.position = '';
document.body.style.top = '';
window.scrollTo (0, parseInt (scrolly || '0') * -1);

dipaku! Badan tidak lagi menatal apabila kotak modal dibuka dan kekal dalam kedudukan tatal apabila kotak modal dibuka dan ditutup. Long Live!

Atas ialah kandungan terperinci Mengelakkan menatal halaman apabila modal dibuka. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!