Scroll Inverted, start at the bottom

Question

Good morning, I am with the following doubt, I am trying to make 1 chat, and whenever a message is received, or sent, I wanted the scroll to stay low, I am Using Meteor and I am new to this, I tried the following

I have the following html code

<div class="chat">
         {{#each mensagens}}
            {{> list}}
         {{/each}}
       </div>

        <form class="Insert">
            <br> <br>
             <center>
                <input type="text" name="text"> <br><br>
                <input type="submit" value="Enviar">
            </center>
            <br>
        </form>

and the following code in the JS

Template.chat.helpers({
 scroll: function(){
  var objDiv = document.getElementById("chat");
  objDiv.scrollTop = objDiv.scrollHeight;)
 }});

Answer 1

This example I think can help you.

It already starts from bottom to top and the scroll always stays at the base of the container

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

#chatbox {
    overflow:   none;
    position:   relative;
    width:      100%;
    height:     200px;
    border: 1px solid #ccc;
}
#chatmessages
{
    overflow:   auto;
    position:   absolute;
    bottom:     0;
    width: 100%;
    max-height: 200px;
}
#chatmessages div {
    border:1px solid #e2e4e3;
    border-radius: 5px;
    margin:5px;
    padding:10px;
}

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<div id="chatbox">
    <div id="chatmessages">
        <div>Hi </div>
        <div>Hello </div>
        <div>How are you ?</div>
        <div>I am fine, Thanks ! </div>
        <div>And how about you? </div>
    </div>
</div>

Source

---

Bonus: Gambit to do only with CSS. It is a rotated div to stay upside down, then use direction:rtl to return the bar of scroll right and text-align:left to adjust the text (tip from @lazyFox =D ). Then the content of the messages is rotated upside down.

.scrollable {
    transform-origin: 50% 50%; 
    transform: rotate(180deg); 
    border: 1px solid;
    width: 120px; 
    height: 120px; 
    overflow-y: auto;
    direction: rtl;
    text-align: left;
}
.message {
    padding: 0.5em;
}
.messages_wrap {
    float: left;
    width: 100%; 
    transform: rotate(180deg);
}

<div class="scrollable">
    <div class="messages_wrap">
        <div class="message">Your message1</div>
        <div class="message">Your message2</div>
        <div class="message">Your message3</div>
        <div class="message">Your message4</div>
        <div class="message">Your message5</div>
        <div class="message">Your message6</div>
        <div class="message">Your message7</div>
        <div class="message">Your message8</div>
        <div class="message">Your message9</div>
    </div>
</div>