Innerhalb eines DIV-Elements scrollen

[Dragosius]

Hallo,

wie kann ich es denn ermöglichen, nur innerhalb eines DIV-Elements zu scrollen?

Bisher habe ich dies für die gesamte Seite:

echo "<script>\n setInterval(\"window.scrollTo(1,300000)\",100)\n</script>\n";

Nur jetzt habe ich den Inhalt in eine DIV-Box gepackt, damit alle anderen Inhalte nicht immer bis zum Ende der Seite scrollen. (Es handelt sich um einen Chat)

Also ich meine dass man auf der gesamten Seite ganz normal scrollen kann, nur das eine DIV ist immer ganz am Ende, egal wie viele Zeilen es hat.


Hier wäre z.B. so ein DIV-Layout:
https://codepen.io/anon/pen/xGyMjM
In diesem Beispiel soll der Scrollbalken des blauen DIV immer ganz unten sein. (Auch wenn neuer Inhalt rein geladen wird)

 

[Sempervivum]

Ungetestet: Du kannst statt dem window-Element auch das div-Element nehmen und darauf das Scrolling anwenden. Und besser das Javascript direkt ausgeben, ohne echo außerhalb der php-Tags, dann wird es ein ganzes Stück übersichtlicher:

<script>
    setInterval(() => {
        document.getElementById('id-des-div').scrollTo(1,300000);
    }, 100);
</script>

Edit: Mit dem genannten Codepen getestet und funktioniert. Ich finde es ungünstig, dass das Ganze zyklisch gemacht wird. Gibt es kein Event für das Laden des neuen Inhalts an das man sich anschließen könnte? Oder, wenn nicht, einen Mutation-Observer einrichten.

Edit2: Mutation-Observer im Codepen eingebaut. Zum Testen das div#content-wrapper editierbar gemacht. Füge ich Text dort ein, wird zum Ende gescrollt, d. h. es scheint zu funktionieren.
https://codepen.io/Sempervivum/pen/LYOoaXr