Barre de progression de lecture

Cet extrait de code ajoute une barre de progression de lecture à une page Web. La barre représente visuellement la progression du défilement de l'utilisateur dans la zone de contenu principale. Décomposons son fonctionnement et améliorons-le.

Le code tente de calculer la progression en fonction de la position de défilement par rapport à la hauteur totale de l'élément main. Cependant, il présente plusieurs problèmes :

• Code incomplet : Le code fourni est tronqué. Il manque la partie cruciale qui crée et met à jour visuellement la barre de progression. Le div est créé, mais aucune logique de mise à jour de style ou de progression n'est présente.
• Calcul de la hauteur incorrect : Le calcul de totalHeight peut être inexact en fonction de la structure de la page. L'utilisation de outerHeight(true) inclut des marges, ce qui peut ne pas être souhaité. Il ne tient pas non plus compte du contenu dynamique susceptible de modifier la hauteur après le calcul initial.
• Manque de mise à jour de la progression : Il n'y a pas de code pour mettre à jour la barre de progression lorsque l'utilisateur fait défiler. Le calcul n'est effectué qu'une seule fois lorsque le document est prêt.
• Problème de hauteur du pied de page : La soustraction footerHeight peut entraîner un calcul de progression incorrect si le pied de page est corrigé ou chevauche le contenu principal.

Voici une version améliorée qui résout ces problèmes :

<code class="language-javascript">$(document).ready(function() {
  if ($('body').hasClass('single')) {
    const progressBar = $('<div id="reading-progress"></div>');
    $('header').after(progressBar);

    let totalHeight = $('main').height(); // Use height() for more accurate calculation
    let windowHeight = $(window).height();

    $(window).on('scroll', function() {
      let scrollTop = $(this).scrollTop();
      let progress = (scrollTop / (totalHeight - windowHeight)) * 100; // Adjust for window height
      progress = Math.min(progress, 100); // Cap progress at 100%
      $('#reading-progress').css('width', progress + '%');
    });
  }
});</code>

Ce code amélioré :

1. Crée une barre de progression : Il crée dynamiquement un div avec l'ID reading-progress pour faire office de barre de progression.
2. Utilise height() : Il utilise height() au lieu de outerHeight(true) pour un calcul plus précis de la hauteur du contenu principal.
3. Gère les événements de défilement : Il utilise $(window).on('scroll', ...) pour mettre à jour en permanence la largeur de la barre de progression à mesure que l'utilisateur fait défiler.
4. Calcule la progression avec précision : Le calcul de la progression prend en compte la hauteur de la fenêtre visible, empêchant la barre de dépasser 100 %.
5. Ajoute du CSS (nécessaire) : Vous devrez ajouter du CSS pour styliser le #reading-progress div. Par exemple :

<code class="language-css">#reading-progress {
  height: 5px; /* Adjust height as needed */
  background-color: #007bff; /* Adjust color as needed */
  position: fixed;
  top: 0;
  left: 0;
  width: 0; /* Initially 0% width */
  z-index: 1000; /* Ensure it's on top */
}</code>

N'oubliez pas d'inclure jQuery dans votre projet pour que ce code fonctionne. Ce code révisé fournit une barre de progression de lecture plus robuste et plus précise. D'autres améliorations pourraient inclure la gestion des cas extrêmes et l'ajout d'un style plus sophistiqué.

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!