Comment implémenter des Divs à verrouillage de défilement dans Mobile Safari ?

Div de verrouillage du défilement dans Mobile Safari

Bien que la propriété « position : fixe » pour les éléments soit une approche courante pour le positionnement fixe, elle fait face à des limitations dans Mobile Safari. Cependant, une solution intelligente a émergé de Gmail, présentant une barre de menu flottante dans la vue des messages.

Cette technique consiste à créer un div avec une position fixe et à utiliser l'événement window.onscroll de JavaScript pour mettre à jour sa propriété supérieure lors du défilement. Voici comment cela fonctionne :

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

Ce code JavaScript se lie à l'événement de défilement de la fenêtre et ajuste la propriété supérieure de l'élément "fixedDiv". Le calcul garantit que le div reste en bas de la page, quelle que soit la position de défilement.

Cette approche s'avère particulièrement utile lors de la création d'éléments qui persistent à l'écran pendant que l'utilisateur fait défiler le contenu. Qu'il s'agisse de menus flottants, de barres de progression ou d'autres composants interactifs, cette technique constitue une solution fiable pour un positionnement fixe dans Mobile Safari.

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!