Comment déterminer le pourcentage de défilement vertical entre navigateurs en JavaScript ?

Méthode multi-navigateurs pour déterminer le pourcentage de défilement vertical en JavaScript

Dans le développement Web, il devient souvent nécessaire de déterminer le pourcentage de défilement vertical barre de défilement parcourue par un utilisateur. La méthode suivante fournit une solution multi-navigateurs à ce problème.

Approche basée sur les fonctions

En utilisant des éléments HTML et des objets de document, nous pouvons calculer le pourcentage de défilement comme suit :

<code class="javascript">function getScrollPercent() {
    var h = document.documentElement, 
        b = document.body,
        st = 'scrollTop',
        sh = 'scrollHeight';
    return (h[st]||b[st]) / ((h[sh]||b[sh]) - h.clientHeight) * 100;
}</code>

Alternative jQuery

Pour ceux qui préfèrent jQuery, un écouteur d'événement 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.log(scrollPercent);
})</code>

Limitations

Notez que cette méthode peut ne pas afficher avec précision 100 % sur les navigateurs mobiles modernes en raison de la fonctionnalité de masquage automatique lors du défilement.

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!