Forum • Rocket Beans TV

Wie implementiert man eine Scrollleiste wie hier im Forum?

Hi,

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.

image

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?

Vielleicht hilft dir das?

Danke, das werde ich mir bei Gelegenheit im Detail angucken!

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

1 Like

Jein. Wenn die Daten pures HTML wären und nicht aus einer Datenbank kämen, müsste man anders vorgehen z.B. auch das geht. :slight_smile:

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.

Sorry falls ich mich nicht gut artikuliere :frowning:

Kann man irgendwie RBTV Mitarbeiter kontaktieren? Einer der Frontend Developer von RBTV könnte mir das locker in wenigen Sekunden erklären…

@DoomDesign Hey sorry für den Ping, aber vielleicht kannst du mir hier weiterhelfen? :smiley:

gar nicht. Das Forum ist von Discourse

Aber vllt kann dir trotzdem jemand weiterhelfen

1 Like

Tach,

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:

1 Like

Jo danke! Das hilft mir schon mal weiter! Ich wusste nämlich nicht mal wo nach ich googlen soll :slight_smile:

1 Like

Sehr gutes Feature und gut implementiert.