Wie scrolle ich automatisch zum Ende eines Divs, wenn Daten hinzugefügt werden?

Automatisches Scrollen zum Ende eines Divs beim Hinzufügen von Daten

In einem HTML-Dokument ist eine Tabelle in einem Div mit bestimmten Stilen eingeschlossen die den horizontalen Überlauf einschränken und gleichzeitig die Sichtbarkeit der vertikalen Bildlaufleiste ermöglichen. Das Ziel besteht darin, das Scrollen des Div nach unten zu automatisieren, wenn neue Daten an die Tabelle angehängt werden.

JavaScript-Lösung:

Um dies zu erreichen, kann eine JavaScript-Intervallfunktion beschäftigt sein. Diese Funktion aktualisiert regelmäßig die scrollTop-Eigenschaft des Div, damit sie mit seiner scrollHeight übereinstimmt. Dadurch wird sichergestellt, dass das Div automatisch nach unten scrollt, wenn Daten hinzugefügt werden.

Der folgende Code zeigt, wie dies implementiert werden kann:

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

Benutzerdefinierter Ereignisaufruf:

Wenn Sie den Zeitpunkt des Hinzufügens von Daten steuern, besteht ein alternativer Ansatz darin, die Funktion nach dem Hinzufügen neuer Daten manuell aufzurufen. Dies macht eine Intervallfunktion überflüssig und bietet eine größere Flexibilität bei der Steuerung des Scrollverhaltens.

Um dies zu implementieren, rufen Sie die innere Funktion des obigen Codes auf, nachdem Sie Daten zur Tabelle hinzugefügt haben:

elem.scrollTop = elem.scrollHeight;

Das obige ist der detaillierte Inhalt vonWie scrolle ich automatisch zum Ende eines Divs, wenn Daten hinzugefügt werden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!