Pourquoi la navigation fixe saute-t-elle lorsque le clavier virtuel s'active dans Mobile Safari ?

Comment empêcher la navigation fixe de sauter lors de l'activation du clavier virtuel

Les éléments de navigation fixes peuvent présenter un comportement inattendu lorsque le clavier virtuel apparaît dans Mobile Safari . Cela peut amener la navigation à sauter à une position indésirable au milieu de la page.

Le problème

Les utilisateurs subissent un changement soudain de la position de l'élément de navigation fixe lorsque ils se concentrent sur un champ de saisie de texte dans la navigation fixe et le clavier virtuel apparaît. Ceci est particulièrement visible lorsque l'élément de navigation est positionné en bas de la page.

La solution

Pour résoudre ce bug, pensez à utiliser le code CSS et JavaScript suivant :

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');
    });
}

En ajoutant la classe fixfixed au corps lorsque un élément d'entrée est mis au point et en le supprimant lorsque l'entrée est floue, vous pouvez basculer les éléments fixes en position : absolue, puis les réinitialiser en position : fixe si nécessaire. Cette solution empêche efficacement l'élément de navigation de sauter lors de l'activation du clavier.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!