Comment empêcher la barre d'adresse de se cacher dans les navigateurs mobiles lors de l'utilisation du positionnement absolu ?

Résolution de la barre d'adresse persistante dans les navigateurs mobiles

Il n'est pas rare que des sites Web avec des mises en page non conventionnelles soient confrontés à des problèmes avec le mécanisme de masquage automatique de la barre d'adresse dans les navigateurs mobiles. Cela peut perturber les fonctionnalités et créer des expériences utilisateur involontaires.

Problème :

Les sites Web qui s'appuient fortement sur un positionnement absolu avec JavaScript pour leur mise en page horizontale rencontrent souvent le problème du défilement involontaire. . Bien que les éléments se trouvent dans la hauteur de la fenêtre, la barre d'adresse reste masquée, déclenchant une série d'événements indésirables :

• Redimensionner l'événement alors qu'il ne devrait pas
• Comportement de défilement incorrect dans le défilement vertical content

Solution :

Pour éviter ce comportement de masquage automatique, une combinaison de propriétés CSS peut être utilisée :

Code CSS :

<code class="css">html {
  background-color: red;
  overflow: hidden;
  width: 100%;
}

body {
  height: 100%;
  position: fixed;
  /* prevent overscroll bounce*/
  background-color: lightgreen;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  /* iOS velocity scrolling */
}</code>

Explication :

• html { débordement : caché ; } : empêche le défilement en dehors de la fenêtre.
• body { height : 100 % ; } : Garantit que le corps occupe toute la hauteur de la fenêtre.
• body { position:fixed; } : Corrige le corps dans la fenêtre, l'empêchant de défiler.
• body { overflow-y: scroll; } : Active le défilement vertical dans le corps.
• body { -webkit-overflow-scrolling: touch; } : optimise le défilement pour les appareils tactiles iOS.

Cette solution verrouille efficacement la barre d'adresse dans son état développé, permettant aux utilisateurs de faire défiler les zones de contenu souhaitées sans déclencher d'événements indésirables ni perturber la disposition visuelle.

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!