Karaoke: Aktueller Text soll mittig (y) sanft auf das Display gerollt werden

[Rolf B]

Hallo Linuchs,

ich kann die Seite öffnen. Via http. Als https nicht.

<time data-von="00:06.50">Mit 'nem Drink in der Hand im heißen Sand</time>

Das ist semantisch falsch. Das time Element muss eine Zeitangabe enthalten. Keinen Freitext, der zeitabhängig ist. Du hast teilweise time-Elemente, die inline angezeigt werden, und teilweise welche, die ganze Zeilen sind und wo Du mit <br> den Umbruch erzeugst. Ich würde hier auf div und span zurückfallen, und statt data-von das Attribut data-zeitpunkt oder so verwenden, um die Zeitabhängigkeit zu beschreiben.

Die zeitlich zu markierenden Elemente sammelst Du dann mit

const nl_lines = document.querySelectorAll(".text [data-zeitpunkt]");

ein.

Erfundene Elemente wie bem oder l solltest Du auch nicht verwenden. Custom-Elemente MÜSSEN ein – im Namen tragen, also k-bem oder k-l, wie auch immer. Aber nicht bem oder l.

Zu deiner Frage:

   arr_time[i].scrollIntoView({ behavior: 'smooth', block: 'end' });

Sieht nicht unbedingt schön aus, löst aber das Problem als Einzeiler. Smooth funktioniert auf meinem PC nicht, das kann aber auch daran liegen dass das eine virtuelle Maschine ohne GPU ist. Probier's mal.

Rolf