JSFiddle - React, Tailwind, and code Playground

by calder12

HTML

<div class="messages-container">

</div>
<button class="append">
Append Message
</button>

CSS

.messages-container {
  width: 300px;
  height: 300px;
  overflow-y: scroll;
}

JavaScript

$(".append").on("click", function(e) {
	e.preventDefault();
  $(".messages-container").append("<p>I'm a new message</p>");
  var height = $(".messages-container")[0].scrollHeight;
  $(".messages-container").animate({
  	scrollTop: height
  })
});