Comment calculer le pourcentage de défilement en JavaScript pour différents navigateurs ?

Détermination du pourcentage de défilement en JavaScript : une approche multi-navigateurs

Pour la compatibilité entre navigateurs lors de la détermination du pourcentage de défilement vertical terminé, une méthode polyvalente est requise. Bien que des frameworks comme Dojo, jQuery, Prototype et Mootools puissent offrir des solutions, nous allons approfondir une approche JavaScript native.

Implémentation JavaScript native

À l'aide des propriétés 'scrollTop' et 'scrollHeight', nous pouvons calculer le pourcentage de défilement comme suit :

<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>

Cette méthode détermine efficacement le pourcentage de défilement dans tous les principaux navigateurs, y compris Chrome, Firefox et IE9.

Implémentation de jQuery (réponse originale)

Bien que la solution native soit efficace, nous fournissons également l'implémentation jQuery à partir de la réponse originale :

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

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

Remarque : écart potentiel sur les navigateurs mobiles

Il est important de notez que la méthode fournie peut ne pas atteindre une précision de 100 % sur les navigateurs mobiles modernes en raison du comportement de masquage automatique lors du défilement de l'interface utilisateur. Cependant, pour la plupart des scénarios, il devrait fournir une approximation fiable du pourcentage de défilement sur différents 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!