JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<textarea id="message_box" rows="5">
ligne1
ligne2
ligne3
ligne4
ligne5
ligne6
ligne7
ligne8</textarea>

JavaScript

$(function() {
  // initialise le scroll au bas de l'élément
	$("#message_box")[0].scrollTop = $("#message_box")[0].scrollHeight;

	window.setInterval(function(){
    var box = $("#message_box")[0];
    
    // on vérifie si le scroll est en bas de l'élément
    var toBottom = box.offsetHeight + box.scrollTop >= box.scrollHeight;
    
    // on ajoute le message
    $("#message_box").append('\nnouvelle ligne');
    
    // si le scroll était en bas avant l'ajout du message, on scroll vers le bas
  	if (toBottom) {
  		$("#message_box").animate({scrollTop: $("#message_box")[0].scrollHeight},2000);
      console.log('scroll down');
    }
  }, 3000);
});