Comment déterminer le pourcentage de défilement vertical en JavaScript sur différents navigateurs ?

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

La possibilité de déterminer le pourcentage de défilement vertical de l'utilisateur est cruciale pour la mise en œuvre du défilement fonctionnalités dépendantes dans les applications Web. Ce guide complet fournit une solution multi-navigateurs pour calculer avec précision le pourcentage de défilement.

Solution sans cadre

Pour les navigateurs tels que Chrome, Firefox et IE9, le La formule suivante peut être utilisée pour calculer le pourcentage de défilement :

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

où :

• h est l'élément racine du document
• b est l'élément de corps du document
• st est soit 'scrollTop' (pour les navigateurs WebKit) soit 'scrollTop' (pour les autres navigateurs)
• sh est soit 'scrollHeight' (pour les navigateurs WebKit) ou 'scrollHeight' (pour les autres navigateurs) )

Implémentation de fonction

Vous pouvez encapsuler cette formule dans une fonction pour la réutilisabilité :

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

Solution jQuery

Si vous utilisez jQuery, l'extrait de code suivant fournit une solution multi-navigateurs pour calculer le pourcentage de défilement :

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

Remarque

• Pour les navigateurs mobiles modernes, la solution peut ne pas atteindre 100 % en raison du comportement de masquage automatique lors du défilement de l'interface utilisateur du navigateur.
• La solution jQuery est basée sur la réponse originale fournie.

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!