Sponsored Links |
|
||||
Dafür brauchst du Javascript, daher wäre die Frage in dem Bereich besser aufgehoben.
Grob umrissen brauchst du: - Eine Funktion die dir die Differenz vom sichtbaren Bereich des Artikels bis zum Ende liefert - Einen Scroll-Event-Listener der deine Funktion ausführt und deine Anzeige aktualisiert (debounce nicht vergessen, sonst bremst du das Scrollen aus) Für die Funktion brauchst du die Höhe des Viewport, die Scrollposition und Offset und Höhe des Elementes welches deinen Artikel beinhaltet. Wenn du die Scrollposition + Viewporthöhe mit dem Offset vergleichst, weißt du wann der Artikel in den sichtbaren Bereich kommt. Vergleichst du Scrollposition + Viewporthöhe mit Offset + Artikelhöhe weißt du wann das Ende des Artikel sichtbar ist bzw. wie weit der Zustand noch entfernt ist. Die Umrechnung in Prozent bekommst du hin, oder? |
Sponsored Links |
|
||||
Zugegeben, ich bin JS- Unerfahren. Hier nochmal meine genaue Vorstellung: How To Survive The TitanFall BETA | Stream - Made For Reading als Balken im oberen Bereich.
|
|
||||
Naja, deine Frage habe ich beantwortet, du weißt wie du das realisieren kannst. Wenn du sowas umsetzen möchtest, dann kommst nicht ums Lernen von Javascript herum.
Eigentlich servieren wir hier ungerne fertigen Code, da mich das Thema neugierig gemacht hat, habe ich so ein Skript mal schnell heruntergeschrieben: Code:
function Progress(article, progress) { function throttle(fn, threshold) { threshold = threshold || 250; var last, timeout; return function() { var context = this, now = Date.now(), args = arguments; if (last && now < last + threshold) { clearTimeout(timeout); timeout = setTimeout(function() { last = now; fn.apply(context, args); }, threshold); } else { last = now; fn.apply(context, args); } }; } function getPercentageProgress(article) { var boundary = document.documentElement.scrollTop + document.documentElement.clientHeight - article.offsetTop, readProgress = Math.min(Math.max(boundary, 0), article.offsetHeight), percentage = 100 / article.offsetHeight * readProgress; return Math.round(percentage); } function updateReadProgress() { var percentage = getPercentageProgress(article); progress.style.width = percentage + '%'; } window.addEventListener('scroll', throttle(updateReadProgress)); } new Progress(document.querySelector('article'), document.querySelector('.progress')); Hier gibt es das Beispiel noch mal zum Anschauen. |
|
||||
Natürlich, allerdings habe ich nur im Firefox geschaut. Das bekommst du aber sicher Cross-Browser hin.
Ok, es ist nicht gleich offensichtlich warum das in den Webkit-Browsern nicht funktioniert. Die haben es leider seit Jahren nicht geschafft den alten document.documentElement.scrollTop-Bug zu beheben. Hier die aktualisiert Vorschau. Geändert von inta (16.02.2016 um 10:15 Uhr) |
|
||||
Zitat:
Das heißt in dem Kontext das eine Funktion zu einem späteren Zeitpunkt aufgerufen wird. Da das scroll Event sehr häufig ausgelöst wird, würde die Funktion zum aktualisieren der Anzeige sehr oft aufgerufen. Das ist unnötig und deshalb wird die Funktion derart gedrosselt, dass diese nur viermal pro Sekunde aufgerufen wird. Das passiert mit Hilfe einer Funktion, die beim Aufruf von throttle erzeugt wird. Hilft das? |
Sponsored Links |
Stichwörter |
javascript, scroll |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Var_Dump problem | PHP-Freak | Serveradministration und serverseitige Scripte | 6 | 04.09.2013 13:29 |
CMS - Artikel eines Autors ändern | laborix | Offtopic | 9 | 29.10.2012 23:31 |
Artikel: "Barrierefreie Webseiten gestalten" | kadees | (X)HTML | 3 | 15.01.2012 23:05 |
In Detailansicht leere Felder anzeigen lassen oder nicht? | xenia | (X)HTML | 3 | 22.07.2011 11:51 |
Webseiten sind keine Gemälde | Artikel im PHP-Magazin | ulle | Ressourcen | 0 | 28.07.2005 10:58 |