How to keep a scrollbar always bottom?

Something like this should do what you want if I understood what you want correctly.

Replace messageBody in getElementById() with your chat message container id.

var chatHistory = document.getElementById("messageBody");
chatHistory.scrollTop = chatHistory.scrollHeight;

This will scroll the message container to the bottom. Since scroll position is recorded in pixel and not percentage, the scroll position doesn't change as you add more elements into the container by default.

Do this after you have appended a new message into your chat message container.

Assume your html code like this.

HTML

<div id="parentDiv">
  <div class="people">1</div>
  <div class="people">2</div>
  <div class="people">3</div>
  <div class="people">4</div>
  <div class="people">5</div>
  <div class="people">6</div>
  <div class="people">7</div>
  <div class="people">8</div>
  <div class="people">9</div>
</div>

And then wrap your js like this

JS

var objDiv = document.getElementById("parentDiv");
objDiv.scrollTop = objDiv.scrollHeight;

DEMO

var messageBody = document.querySelector('#messageBody');
messageBody.scrollTop = messageBody.scrollHeight - messageBody.clientHeight;