[GELÖST] bei Nachladen von Text springt der gescrollte Inhalt wieder nach oben

[j-l-n]

Ich habe einen <div>. Dieser hat eine fest definierte Höhe. Per Ajax wird Inhalt nachgeladen, ist dieser "mehr" als in die 500px Höhe passt, kann man den Kasten dank

<div style="height: 500px; overflow: auto;" id="content"></div>

scrollen.

Nun hat das allerdings ein für mich gravierendes Problem: wird neuer Inhalt nachgeladen (also am Ende des Vorherigen hinzugefügt) springt dieser wieder nach oben oder bleibt in der gleichen Postition und man muss erst im Kasten nach unten scrollen, um den neuen Text zu sehen.
Wie bekomme ich es nun hin, dass jedesmal, wenn per Ajax nachgeladen wird, automatisch innerhalb des <div> nach unten gescrollt wird/springt, sodass man sofort den neuen Inhalt sieht?

 

[mikdoe]

Du könntest die Scrollpositionen vor der Ergänzung speichern und danach wieder setzen.
Ich glaube, das sind .scrollTop und .scrollLeft

 

[j-l-n]

Gäbe es eine einfachere Möglichkeit, nämlich dass es immer nach unten springt?

Also für die, die's kennen: Wie im Chat bei Facebook, wo sich eine neue Nachricht auch einfach von unten nach oben schiebt/"selbst scrollt"...

 

[mikdoe]

Ja, mit scrollen.scrollTop = scrollen.scrollHeight
wobei scrollen das document.getElementById('...') ist
Anzuwenden unmittelbar nach der Konkatenation.

 

[kkapsner]

Wobei man dann an das Scrollende springt. Das könnte tiefer sein, als der neue Inhalt anfängt.

Um das exakt zu machen, solltest du scrollen.scrollHeight vor dem Einfügen auslesen und dann nach dem Einfügen diesen Wert an scroll.scrollTop übergeben.

 

[j-l-n]

Danke, hab das nun so wie von euch empfohlen gelöst, indem jede 1000ms automatisch nach unten gescrollt wird.
Thread kann auf "Gelöst"!

 

[kkapsner]

Das ist aber ziemlich unsauber. Und was ist, wenn ich mal was weiter oben nachlesen will?

PS: dieses Springen muss gar nicht sein. Wie fügst du denn den Inhalt, der per AJAX nachgeladen wird, ein?