Mengapa Navigasi Tetap Melompat Apabila Papan Kekunci Maya Diaktifkan dalam Safari Mudah Alih?

Cara Mencegah Navigasi Tetap daripada Melompat Semasa Pengaktifan Papan Kekunci Maya

Elemen navigasi tetap boleh mempamerkan tingkah laku yang tidak dijangka apabila papan kekunci maya muncul dalam Safari Mudah Alih . Ini boleh menyebabkan navigasi melompat ke kedudukan yang tidak diingini di bahagian tengah halaman.

Masalahnya

Pengguna mengalami perubahan mendadak dalam kedudukan elemen navigasi tetap apabila mereka menumpukan pada medan input teks dalam navigasi tetap dan papan kekunci maya muncul. Ini amat ketara apabila elemen navigasi diletakkan di bahagian bawah halaman.

Penyelesaian

Untuk menangani pepijat ini, pertimbangkan untuk menggunakan kod CSS dan JavaScript berikut :

CSS:

.header {
    position: fixed;
}

.footer {
    position: fixed;
}

.fixfixed .header,
.fixfixed .footer {
    position: absolute;
}

JavaScript:

if ('ontouchstart' in window) {
    /* Cache DOM references */
    var $body = $('body');

    /* Bind events */
    $(document)
    .on('focus', 'input', function() {
        $body.addClass('fixfixed');
    })
    .on('blur', 'input', function() {
        $body.removeClass('fixfixed');
    });
}

Dengan menambahkan kelas tetap pada badan apabila elemen input difokuskan dan mengalih keluarnya apabila input menjadi kabur, anda boleh menukar elemen tetap kepada kedudukan: mutlak dan kemudian menetapkannya semula kepada kedudukan: tetap apabila diperlukan. Penyelesaian ini berkesan menghalang elemen navigasi daripada melompat semasa pengaktifan papan kekunci.

Atas ialah kandungan terperinci Mengapa Navigasi Tetap Melompat Apabila Papan Kekunci Maya Diaktifkan dalam Safari Mudah Alih?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!