Lesefortschrittsbalken

Dieses Code-Snippet fügt einer Webseite einen Lesefortschrittsbalken hinzu. Die Leiste stellt visuell den Scroll-Fortschritt des Benutzers durch den Hauptinhaltsbereich dar. Lassen Sie uns die Funktionsweise aufschlüsseln und verbessern.

Der Code versucht, den Fortschritt basierend auf der Bildlaufposition relativ zur Gesamthöhe des main-Elements zu berechnen. Es gibt jedoch mehrere Probleme:

• Unvollständiger Code: Der bereitgestellte Code ist abgeschnitten. Es fehlt der entscheidende Teil, der den Fortschrittsbalken tatsächlich erstellt und visuell aktualisiert. Das div wird erstellt, aber es ist keine Styling- oder Fortschrittsaktualisierungslogik vorhanden.
• Falsche Höhenberechnung: Die Berechnung von totalHeight kann je nach Seitenstruktur ungenau sein. Die Verwendung von outerHeight(true) schließt Ränder ein, die möglicherweise unerwünscht sind. Es berücksichtigt auch keinen dynamischen Inhalt, der die Höhe nach der ersten Berechnung ändern könnte.
• Fehlende Fortschrittsaktualisierung: Es gibt keinen Code, um den Fortschrittsbalken zu aktualisieren, während der Benutzer scrollt. Die Berechnung erfolgt nur einmal, wenn das Dokument fertig ist.
• Problem mit der Fußzeilenhöhe: Das Subtrahieren von footerHeight kann zu einer falschen Fortschrittsberechnung führen, wenn die Fußzeile fest ist oder den Hauptinhalt überlappt.

Hier ist eine verbesserte Version, die diese Probleme behebt:

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

Dieser verbesserte Code:

1. Erstellt einen Fortschrittsbalken: Es wird dynamisch ein div mit der ID reading-progress erstellt, der als Fortschrittsbalken fungiert.
2. Verwendet height(): Es verwendet height() anstelle von outerHeight(true) für eine genauere Berechnung der Hauptinhaltshöhe.
3. Verarbeitet Scroll-Ereignisse: Es verwendet $(window).on('scroll', ...), um die Breite des Fortschrittsbalkens kontinuierlich zu aktualisieren, während der Benutzer scrollt.
4. Berechnet den Fortschritt genau: Die Fortschrittsberechnung berücksichtigt die sichtbare Fensterhöhe und verhindert, dass der Balken 100 % überschreitet.
5. Fügt CSS hinzu (erforderlich): Sie müssen CSS hinzufügen, um das #reading-progress-Div zu formatieren. Zum Beispiel:

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

Denken Sie daran, jQuery in Ihr Projekt einzubinden, damit dieser Code funktioniert. Dieser überarbeitete Code bietet einen robusteren und genaueren Lesefortschrittsbalken. Weitere Verfeinerungen könnten die Handhabung von Randgehäusen und das Hinzufügen eines anspruchsvolleren Designs umfassen.

Das obige ist der detaillierte Inhalt vonLesefortschrittsbalken. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!