Maison >interface Web >tutoriel CSS >Comment obtenir un positionnement fixe dans Mobile Safari : un guide complet

Comment obtenir un positionnement fixe dans Mobile Safari : un guide complet

DDD
DDDoriginal
2024-11-20 02:52:02498parcourir

How to Achieve Fixed Positioning in Mobile Safari: A Comprehensive Guide

Positionnement fixe dans Mobile Safari : un guide complet

Obtenir un positionnement fixe pour un élément par rapport à la fenêtre dans Mobile Safari peut être un défi. Malgré l'opinion largement répandue selon laquelle "position : fixe" ne fonctionne pas dans Mobile Safari, Gmail a introduit une solution innovante qui offre une approximation proche du véritable positionnement fixe.

Une approche pour résoudre ce problème consiste à exploiter JavaScript pour détecter les événements de défilement en temps réel. Cela vous permet d'ajuster dynamiquement la position d'un élément au fur et à mesure du défilement de la page.

Pour obtenir un div à position fixe qui défile vers le bas de la page, vous pouvez implémenter un simple script JavaScript :

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

En ajustant la propriété "top" de l'élément "fixedDiv" en fonction du décalage et de la hauteur de la page, le div maintiendra sa position en bas de la fenêtre pendant que l'utilisateur fait défiler. Le réglage "25" garantit que le div est légèrement décalé par rapport au bas de l'écran pour une visualisation optimale.

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!

Déclaration:
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