So scrollen Sie beim Hinzufügen von Daten automatisch zum Ende eines Divs

Bei der Arbeit mit dynamischen Webinhalten ist es oft wünschenswert, dass Elemente wie Divs automatisch angescrollt werden unten, wenn neue Daten hinzugefügt werden. Dies ist eine häufige Anforderung für Elemente wie Chatfenster oder endlos scrollende Datentabellen.

Stellen Sie sich ein Szenario vor, in dem eine Tabelle in einem Div mit fester Höhe eingeschlossen ist und Sie möchten, dass sie automatisch bis zum Ende scrollt wenn neue Daten angehängt werden. In diesem Artikel wird eine JavaScript-Lösung zum Erreichen dieses Verhaltens untersucht.

JavaScript-Ansatz

Verwenden eines Intervalls:

Wenn der Zeitpunkt der Datenaddition unbekannt ist, Sie können ein Intervall festlegen, um die scrollTop-Eigenschaft des Div regelmäßig zu aktualisieren, damit sie mit seiner scrollHeight übereinstimmt. Dadurch wird sichergestellt, dass das Div immer nach unten scrollt, auch wenn zwischen den Intervallen neue Daten hinzugefügt werden.

window.setInterval(function() {
  var elem = document.getElementById('data');
  elem.scrollTop = elem.scrollHeight;
}, 5000);

In diesem Beispiel wird die setInterval-Funktion alle 5 Sekunden (5000 Millisekunden) ausgeführt und aktualisiert die scrollTop-Eigenschaft des div mit seiner scrollHeight. Dadurch wird das Div effektiv bis zum Ende gescrollt.

On-Demand-Implementierung:

Wenn Sie die Kontrolle darüber haben, wann Daten zum Div hinzugefügt werden, können Sie das Scrollen implementieren Verhalten manuell durch Aufrufen der folgenden Funktion nach dem Hinzufügen neuer Daten:

function scrollToEnd(elem) {
  elem.scrollTop = elem.scrollHeight;
}

Diese Funktion nimmt ein Element als Argument und setzt seine scrollTop-Eigenschaft auf seine scrollHeight, wodurch das Element nach unten gescrollt wird. Rufen Sie diese Funktion einfach immer dann auf, wenn dem Div neue Daten hinzugefügt werden, um den gewünschten Autoscrolling-Effekt zu erzielen.