Comment déterminer avec précision le pourcentage de défilement vertical en JavaScript dans les navigateurs ?

Détermination du pourcentage de défilement vertical entre navigateurs en JavaScript

Dans le développement Web, il est souvent essentiel de surveiller la position de défilement vertical des utilisateurs. Cependant, trouver une méthode précise et compatible avec tous les navigateurs peut s'avérer difficile.

Solution multi-navigateurs

L'extrait de code fourni offre une approche multi-navigateurs pour calculer le pourcentage de défilement vertical :

<code class="javascript">var h = document.documentElement, 
    b = document.body,
    st = 'scrollTop',
    sh = 'scrollHeight';

var percent = (h[st]||b[st]) / ((h[sh]||b[sh]) - h.clientHeight) * 100;</code>

Ce code peut être implémenté en stockant les éléments HTML et body dans les variables h et b, ainsi que les noms de chaîne pour scrollTop et scrollHeight (st et sh). Le pourcentage de défilement est ensuite calculé en divisant la position de défilement vertical actuelle par la hauteur de la fenêtre d'affichage, mise à l'échelle à 100 %.

Implémentation de jQuery

Pour ceux qui préfèrent jQuery, le code suivant peut être utilisé :

<code class="javascript">$(window).on('scroll', function(){
  var s = $(window).scrollTop(),
      d = $(document).height(),
      c = $(window).height();

  var scrollPercent = (s / (d - c)) * 100;
  
  console.clear();
  console.log(scrollPercent);
});</code>

Mise en garde

Il convient de noter que cette solution peut ne pas atteindre 100 % sur les navigateurs mobiles modernes en raison du comportement de masquage automatique des interfaces utilisateur des navigateurs.

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!