Maison > interface Web > tutoriel CSS > le corps du texte

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

Mary-Kate Olsen
Libérer: 2024-10-31 06:28:01
original
560 Les gens l'ont consulté

How to Prevent the Address Bar from Hiding in Mobile Browsers When Using Absolute Positioning?

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>
Copier après la connexion

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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal