basti1012.bplaced.net

Moin. Ich hab mal eine Frage. Und zwar habe ich einen Chat erstellt welcher auch soweit funktioniert. Allerdings ist es so, dass wenn mehrere Nachrichten im Chat sind, der Chatverlauf immer ganz oben anfängt. Sprich: Wenn mehrere Nachrichten drin sind, wird ja eine „Scrollbar“ erstellt, womit man hoch und runterscrollen kann im Chat. Gibt es eine Möglichkeit das diese Scrollbar immer automatisch ganz unten ist?` Habe dazu leider nichts gefunden.

Code

                                    
                                <style>
  #chat{
  width:80vw;
  height:80vh;
  margin:auto auto;
  border:1px solid black;
  overflow:auto;
}

.chatline{
  margin:10px;
}
</style>
<div id="chat">
  
</div>
<script>
  var messages = [
	'Dude, you smashed my turtle saying "I\'M MARIO BROS!"',
	'Dude, you grabed seven oranges and yelled "I GOT THE DRAGON BALLS!"',
	'Dude, you threw my hamster across the room and said "PIKACHU I CHOOSE YOU!"',
	'Dude, you congratulated a potato for getting a part in Toy Story',
	'Dude, you were hugging an old man with a beard screaming "DUMBLEDORE YOU\'RE ALIVE!"',
	'Dude, you were cutting all my pinapples yelling "SPONGEBOB! I KNOW YOU\'RE THERE!"',
];

var min=500;
var max=2000;

function nachrichten_random(){
   var sms=messages[Math.floor(Math.random() * messages.length)];
   var inter=Math.floor(Math.random() * (max - min + 1)) + min;
   console.log(inter);
   message_in_chat(sms);
   setTimeout(function(){
       nachrichten_random();
   },inter)
}
function message_in_chat(sms){ 
    var chatbox=document.getElementById('chat');
    div=document.createElement('div');
    div.innerHTML=sms;
    div.className='chatline';
    chatbox.append(div);
    chatbox.scrollTop = chatbox.scrollHeight;
}
nachrichten_random();
</script>