Neuer Blogbeitrag: Monatsrückblick - Dezember 2025 🎄

[Mic]

Hi,

Ausgangssituation:

• "basic - HTML", lange Liste mit Links (Spotify-Playliste), "overflow-y: scroll", also vertikale Scrollbar.

• Die Playliste als HTML per Binding aus Datenpunkt eingebunden, also wie folgt:
  

Problem:

Beim Klicken auf einen Link wird die Liste aktualisiert (super!), also das "basic - HTML" Widget neu geladen, was dazu führt, dass die Liste nach oben springt. Ich würde aber vielmehr gerne den angeklickten Link gerne weiterhin direkt anzeigen, ohne dass der Anwender runterscrollen muss.

Heißt: Wenn Lied Nr. 58 angeklickt wird, soll auch das im Scroll-Bereich so sichtbar sein, und nicht wieder hoch springen und nur die ersten 8 Lieder zeigen.

Ansatz:

Der angecklickte Link bekommt ein id="active-title" mit. Daher könnte man per JavaScript diesen anspringen.

Wo ich hänge:

Wie kann ich nach anklicken eines Links (und nachdem das "basic - HTML" aktualisiert wurde) auf den selektierten Link scrollen automatisiert scrollen?

Ich hatte schon getestet, mittels Link auf "#active-title" zu arbeiten, aber das klappt nicht, da die vis-URL selbst bereits eine "#" enthält, und dann ein "Seite nicht gefunden"-Fehler kommt bei Aufruf von hier klicken.

Danke für Eure Hilfe und gerne mehr Infos falls benötigt.

[Mic]

Push

Hat wer von Euch einen Ansatzpunkt, wie ich das lösen könnte?

Danke…

[Mic]

Hier im Spotify-Thread wird die Problematik auch gefragt, leider noch keine Lösung:

viewtopic.php?f=21&t=8173&p=196145#p196137

Etwaige Lösungshinweise wären sehr willkommen :)

[gimli85]

@Mic:

Hier im Spotify-Thread wird die Problematik auch gefragt, leider noch keine Lösung:

viewtopic.php?f=21&t=8173&p=196145#p196137

Etwaige Lösungshinweise wären sehr willkommen :) `

Ich habe eine Lösung gefunden, welche es mir erlaubt, den aktuellen Song stets am oberen Rand der Liste anzuzeigen, ist von mir angetestet worden auf folgenden Geräten (Browser: Chrome, Firefox und Opera) sowie auf einem Android Tablet in ioBroker.Vis App, bis jetzt hat es gut funktioniert.

<size size="150">Ich habe eine neue Anleitung dazu geschrieben, welche man hier finden kann:</size>

LINK: viewtopic.php?f=21&t=18836&p=196766#p196766