Comment positionner les éléments en bas de la fenêtre dans Mobile Safari ?

Positionnement des éléments en bas de la fenêtre dans Mobile Safari

Les approches conventionnelles pour obtenir un positionnement fixe, telles que l'utilisation de position:fixed, ont s'est avéré inefficace pour Mobile Safari. Cependant, des solutions innovantes ont vu le jour, notamment la barre de menus flottante de Gmail, qui ancre efficacement les éléments dans la fenêtre d'affichage.

Une approche viable consiste à utiliser JavaScript pour surveiller les événements de défilement en temps réel. En tirant parti des écouteurs de défilement, les développeurs peuvent ajuster dynamiquement la position des éléments en fonction du comportement de défilement de l'utilisateur. En particulier, le script suivant peut être utilisé pour garantir qu'un élément spécifique reste en bas de la page lors du défilement :

window.onscroll = function() {
  document.getElementById('fixedDiv').style.top =
     (window.pageYOffset + window.innerHeight - 25) + 'px';
};

Dans cet extrait de code, le gestionnaire d'événement onscroll est attaché à l'objet window, assurer une surveillance continue de l’activité de défilement. A chaque événement de défilement, la propriété style.top de l'élément avec l'ID fixedDiv est modifiée.

La valeur attribuée à style.top prend en compte la position actuelle du défilement vertical (window.pageYOffset), la fenêtre du navigateur hauteur (window.innerHeight) et un décalage fixe de 25 pixels. Cette stratégie de positionnement garantit que l'élément reste positionné en bas de la page lorsque l'utilisateur fait défiler, créant ainsi un effet relatif à la fenêtre d'affichage fixe.

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!