Scroll-Fortschrittsanzeige für Seiten

Nutzbar ab: Version

Zeigen Sie Seitenbesuchern beim Scrollen langer Seiten den Lesefortschritt an.

Speziell bei langen Seiten / Artikeln macht es Sinn, dem Seitenbesucher den Lesefortschritt anzuzeigen. Auch auf mobilen Endgeräten ist diese Funktion nützlich, damit der Leser motiviert wird, den Beitrag / Text komplett zu lesen.

Sowohl die BASE Classic als auch BASE (Mobile First) ermöglichen dies durch Verwendung des HTML5 progress-Tags und über die ui.js JavaScript-Datei in Verbindung mit CSS. Hierzu muss lediglich die ui.js auf aktuellstem Stand sein und für die Anzeige des Scrollbalkens im entsprechenden Selektor die Klasse wglAddScrollProgress hinzugefügt werden.

Sowohl für BASE Classic als auch BASE (Mobile First) können Sie die Funktion als Weblic® "Scroll-Fortschritt" installieren, womit Sie die CSS-Styles als Grundlage verfügbar haben.
Die BASE (Mobile First) erlaubt die Einstellung dann über den Layoutwizard.
In der BASE Classic fügen Sie wie unten angegeben die Klasse im gewünschten Element hinzu.
Es steht mit diesem Weblic® also kein Strukturelement zum Einfügen über den Struktureditor zur Verfügung, sondern es werden mit dem Weblic® lediglich die erforderlichen JavaScript- und CSS-Dateien mitgeliefert.

BASE Classic: Zeigt den Scroll-Fortschritt innerhalb body an (design.css) - Kopfbereich nicht fixiert

body {-w-add-classes:wglAddScrollProgress;}

#scrollProgress {
  position:fixed;
  top:0; /* zeigt den Scroll-Fortschrittbalken oben an (bottom:0; zeigt diesen unten an) */
  /* ... */
}

body #scrollProgress {
  position:fixed;
}

BASE Classic: Zeigt den Scroll-Fortschritt innerhalb blockTop an (design.css) - Kopfbereich sollte fixiert sein

/* Gestaltung der Kopfbereichs */
#blockTop {/* ... */;-w-add-classes:wglAddScrollProgress;}

BASE (Mobile First): Zeigt den Scroll-Fortschritt im fixierten blockHeader an (page.scss)

/* Gestaltung der Kopfbereichs */
#blockHeader {  
  
  /* ... */
  
  -w-add-classes:wglAddScrollProgress;

Scroll-Fortschritt nur bei bestimmten Objekttypen anzeigen

Der Scroll-Fortschritt kann generell oder auch nur für bestimmte Objekttypen angezeigt werden. Dazu genügt es, den im HTML-Element eingetragenen Objekttyp zu ergänzen.

BASE (Mobile First): Zeigt den Scroll-Fortschritt nur an, wenn die Seite vom Objekttyp news ist (page.scss)

.object-news body {
  -w-add-classes:wglAddScrollProgress;  
}

Scroll-Fortschritt Anzeige formatieren

Das Aussehen des Scroll-Fortschritt Balkens können Sie über die mitgelieferten CSS-Styles individuell formatieren.