Prepend new messages with fixed scroll on last position

HTML

<div id="messager" class="messager">
   
</div>

CSS

.messager {
  height: 200px;
  overflow-y: scroll;
}
.messager__message {
  border: 1px solid gray;
  padding: 3px 5px;
  margin: 2px;
}

JavaScript

function addMessages(count=10) {
	const words = ["Привет.", "Как дела?", "Нормально.", "Плохо.", "У тебя как?", "Ясно"];
  const messages = Array.from({length: count}, () => words[Math.floor(Math.random()*words.length)]);
  jQuery('#messager').prepend(messages.map(el => `<div class="messager__message">${el}</div>`));
}

addMessages();
$('#messager').scrollTop($('#messager')[0].scrollHeight);

$('#messager').scroll(function () {
  let lastHeight = $(this)[0].scrollHeight;
  console.warn(lastHeight);
  if ($(this)[0].scrollTop === 0) {
    addMessages();
    let newHeight = $(this)[0].scrollHeight;
    $('#messager').scrollTop(newHeight - lastHeight);
  }
});