ich möchte für eine Web-Anwendung eine Scrollleiste wie hier im Forum implementieren. Ein Tab in dem man scrollt enthält viele Daten, die erst beim Scrollen nachgeladen werden. Mit einer Scrolleiste wie hier im Forum (siehe Bild), kann man zu jedem beliebigem Datum springen, obwohl das Datum noch nicht geladen wurde.
Kann man sowas selber implementieren, gibt es da open source Lösungen? Wie hat es RBTV gemacht? In Javascript natürlich.
EDIT: Ich bin schon mitten drin, das zu implementieren, bin allerdings auf diverse Probleme gestoßen und wollte doch lieber ein mal fragen, falls ich es mir viel zu schwer mache.
Ich gehe davon aus, dass du das nicht mit Vanilla-JS machst. Nutzt du jQuery dazu? Und wo kommen die Daten her? Aus einer mysql Datenbank, deren Ergebnisse du asynchron lädst?
Ja wir nutzen auch JQuery. Ich hole mir die Daten per Ajax Request von einer ASP.Net Anwendung. Die Anwendung selber holt sich die Daten von irgendwo, hält sie aber teilweise selber im Speicher und was weiß ich, spielt aber im Detail ja keine Rolle.
Ich werde mir aber mal die Lösung von @Cyberblitzbirne erst mal ansehen
Habs mir angeguckt. Ehrlich gesagt verstehe ich es nicht so 100%, vor allem diese „debounce“ Funktion. Allerdings ist das auch nicht wirklich das wonach ich suche. Du berechnest dort einfach den prozentualen Anteil des aktuell sichtbaren Bereichts zur gesamten Scrollleiste.
Das Problem ist ja aber gerade, dass nur der sichtbare Bereich überhaupt geladen ist, im Browser. Die Fenstergröße bzw. Scrolleiste ist also nicht so groß wie wenn alle Daten geladen wären.
Die „globale“ Scrolleiste (so nenn ich es jetzt mal) soll aber über den gesamten Content (der auf dem Server liegt) laufen. Ich weiß vorher schon wie viel Daten es insgesamt gibt, ich weiß wie groß ein „Batch“ von Daten ist (also wie viel Daten immer auf ein mal nachgeladen werden beim Scrollen), ich weiß eigentlich alles was man wissen muss.
Mein Problem ist auch eigentlich einfach nur folgendes:
Wenn ich den Browser scrolle, dann muss ich irgendwie berechnen, dass ein neuer „Eintrag“ (also ein neues Datum) ins Sichtfeld gekommen ist und dann den Zähler der globalen Scrolleiste ein mal hochzählen. Woher weiß ich, dass ein neuer Eintrag ins Sichtfeld gekommen ist, ohne bei jedem Scrollen jeden einzelnen Eintrag zu überprüfen ob er sichtbar ist.
wie @NaMaMe richtig erwähnt, haben wir das Forum nicht programmiert.
Dein Vorhaben klingt nach Pagination, nur mit einer Scrollleiste statt anklickbaren Seitenzahlen. Bei einer Pagination kennt man ja auch vorher die groben Daten wie Seitenanzahl / Anzahl an Items, aber erst bei einem konketen Klick werden die Inhalte geladen.
Bei Discourse nennt sich das Widget “Timeline”. Man könnte also bei Google mal nach “Paginated Timeline”, “Timeline Navigation”, “AJAX Timeline” oder ähnlichem suchen.
Hier mal eine der Quelldateien von Discourse selbst:
