Chat scroll bottom CSS or Javascript only

Question

Please help me to fix this. I am attaching the part of my code here. It's a chat and I need the scroll to be at the bottom by default and also when a new message enters it should move the rest up.

.inner-chat-info {
  display: flex;
  align-items: center;
  display: -webkit-flex;
  margin-bottom: 10px;
  padding-top: 10px;
}
.chat-user-name {
  font-size: 16px;
  font-weight: bold;
  color: #2581bd;
}

.chat-user-data {
  margin-left: 12px;
}
.dialog-text {
  font-weight: 100;
  font-size: 16px;
}
.message-date {
  color: #bbbbbb;
  font-weight: 100;
}
.dialog {
  padding: 0 40px;
  height: 350px;
  overflow-y: scroll;
}

.send-msb-btn {
  margin-right: 10px;
}

<div class="dialog">
              <div class="inner-chat-info">
                <div class="chat-user-photo">
                  <img class="" src="./assets/images/users/tom.png" alt="">
                </div>
                <div class="chat-user-data">
                  <span class="chat-user-name">Hello hello </span>  
                  <span class="message-date">сHello hello :17</span>
                <div class="dialog-text">
                  Hello hello 
                </div>
                </div>
              </div>
              <div class="inner-chat-info">
                <div class="chat-user-photo">
                  <img class="" src="./assets/images/users/leonardo.png" alt="">
                </div>
                <div class="chat-user-data">
                  <span class="chat-user-name"> Hello hello </span>  
                  <span class="message-date">9:20</span>
                <div class="dialog-text">
                  Hello hello 
                </div>
                </div>
              </div>
              <div class="inner-chat-info">
                <div class="chat-user-photo">
                  <img class="" src="./assets/images/users/tom.png" alt="">
                </div>
                <div class="chat-user-data">
                  <span class="chat-user-name"> Hello hello  </span>  
                  <span class="message-date">10:20 </span>
                <div class="dialog-text">
                  Hello hello 
                </div>
                </div>
              </div>
              <div class="inner-chat-info">
                <div class="chat-user-photo">
                  <img class="" src="./assets/images/users/leonardo.png" alt="">
                </div>
                <div class="chat-user-data">
                  <span class="chat-user-name"> Hello hello  </span>  
                  <span class="message-date">Hello hello </span>
                <div class="dialog-text">
                  Hello hello 
                </div>
                </div>
              </div>
              <div class="inner-chat-info">
                <div class="chat-user-photo">
                  <img class="" src="./assets/images/users/tom.png" alt="">
                </div>
                <div class="chat-user-data">
                  <span class="chat-user-name"> Hello hello и </span>  
                  <span class="message-date">Hello hello </span>
                <div class="dialog-text">
                  Hello hello 
                </div>
                </div>
              </div>
              <div class="inner-chat-info">
                <div class="chat-user-photo">
                  <img class="" src="./assets/images/users/tom.png" alt="">
                </div>
                <div class="chat-user-data">
                  <span class="chat-user-name"> Hello hello  </span>  
                  <span class="message-date">Hello hello </span>
                <div class="dialog-text">
                  :)
                </div>
                </div>
              </div>
            </div>

I tried implementing it myself but did not get it. I tried all these answers with scrollTop and scrollHeight but it didn't work. Please if possible help me to correct my code. Thanks!

Answer 1

I made this with jquery as it solves your problem with one thine of code.

First we get the height of the window

$(window).height()

Then we can target that height and apply the scrollTop function with the height of the window as the value

$('.dialog').scrollTop(heightValue);

As you can se i added a button to clone a message and insert it at the bottom. This listener adds 100 to the page height varible so it will allways go to the bottom. I had some problems getting the exact height of the message.

I tried using outerHeight() but eventually it soped going to the bottom.

Hope this is what you were looking for. Happy to explain or help in a better solution if needed.

var pageHeight = $('.dialog').height();

$('.dialog').scrollTop(pageHeight);


//Function to fake new message
$('button').click(function() {
  $('#clone').clone().appendTo('.dialog');
  pageHeight = pageHeight + 100;
  $('.dialog').scrollTop(pageHeight);
})

.inner-chat-info {
  display: flex;
  align-items: center;
  display: -webkit-flex;
  margin-bottom: 10px;
  padding-top: 10px;
}

.chat-user-name {
  font-size: 16px;
  font-weight: bold;
  color: #2581bd;
}

.chat-user-data {
  margin-left: 12px;
}

.dialog-text {
  font-weight: 100;
  font-size: 16px;
}

.message-date {
  color: #bbbbbb;
  font-weight: 100;
}

.dialog {
  padding: 0 40px;
  height: 350px;
  overflow-y: scroll;
}

.send-msb-btn {
  margin-right: 10px;
}

button {
  position: fixed;
  top: 5vh;
  left: 5vw;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dialog">
  <div class="inner-chat-info">
    <div class="chat-user-photo">
      <img class="" src="./assets/images/users/tom.png" alt="">
    </div>
    <div class="chat-user-data">
      <span class="chat-user-name">Hello hello </span>
      <span class="message-date">сHello hello :17</span>
      <div class="dialog-text">
        Hello hello
      </div>
    </div>
  </div>
  <div class="inner-chat-info">
    <div class="chat-user-photo">
      <img class="" src="./assets/images/users/leonardo.png" alt="">
    </div>
    <div class="chat-user-data">
      <span class="chat-user-name"> Hello hello </span>
      <span class="message-date">9:20</span>
      <div class="dialog-text">
        Hello hello
      </div>
    </div>
  </div>
  <div class="inner-chat-info">
    <div class="chat-user-photo">
      <img class="" src="./assets/images/users/tom.png" alt="">
    </div>
    <div class="chat-user-data">
      <span class="chat-user-name"> Hello hello  </span>
      <span class="message-date">10:20 </span>
      <div class="dialog-text">
        Hello hello
      </div>
    </div>
  </div>
  <div class="inner-chat-info">
    <div class="chat-user-photo">
      <img class="" src="./assets/images/users/leonardo.png" alt="">
    </div>
    <div class="chat-user-data">
      <span class="chat-user-name"> Hello hello  </span>
      <span class="message-date">Hello hello </span>
      <div class="dialog-text">
        Hello hello
      </div>
    </div>
  </div>
  <div class="inner-chat-info">
    <div class="chat-user-photo">
      <img class="" src="./assets/images/users/tom.png" alt="">
    </div>
    <div class="chat-user-data">
      <span class="chat-user-name"> Hello hello и </span>
      <span class="message-date">Hello hello </span>
      <div class="dialog-text">
        Hello hello
      </div>
    </div>
  </div>
  <div class="inner-chat-info">
    <div class="chat-user-photo">
      <img class="" src="./assets/images/users/tom.png" alt="">
    </div>
    <div class="chat-user-data">
      <span class="chat-user-name"> Hello hello  </span>
      <span class="message-date">Hello hello </span>
      <div class="dialog-text">
        :)
      </div>
    </div>
  </div>

  <div class="inner-chat-info">
    <div class="chat-user-photo">
      <img class="" src="./assets/images/users/tom.png" alt="">
    </div>
    <div class="chat-user-data">
      <span class="chat-user-name"> Hello hello  </span>
      <span class="message-date">Hello hello </span>
      <div class="dialog-text">
        :)
      </div>
    </div>
  </div>

  <div class="inner-chat-info">
    <div class="chat-user-photo">
      <img class="" src="./assets/images/users/tom.png" alt="">
    </div>
    <div class="chat-user-data">
      <span class="chat-user-name"> Hello hello  </span>
      <span class="message-date">Hello hello </span>
      <div class="dialog-text">
        :)
      </div>
    </div>
  </div>

  <div class="inner-chat-info">
    <div class="chat-user-photo">
      <img class="" src="./assets/images/users/tom.png" alt="">
    </div>
    <div class="chat-user-data">
      <span class="chat-user-name"> Hello hello  </span>
      <span class="message-date">Hello hello </span>
      <div class="dialog-text">
        :)
      </div>
    </div>
  </div>

  <div class="inner-chat-info">
    <div class="chat-user-photo">
      <img class="" src="./assets/images/users/tom.png" alt="">
    </div>
    <div class="chat-user-data">
      <span class="chat-user-name"> Hello hello  </span>
      <span class="message-date">Hello hello </span>
      <div class="dialog-text">
        :)
      </div>
    </div>
  </div>

  <div id='clone' class="inner-chat-info">
    <div class="chat-user-photo">
      <img class="" src="./assets/images/users/tom.png" alt="">
    </div>
    <div class="chat-user-data">
      <span class="chat-user-name"> Hello hello  </span>
      <span class="message-date">Hello hello </span>
      <div class="dialog-text">
        :)
      </div>
    </div>
  </div>

  <button>New Message</button>
</div>

Answer 2

Here is a solution using pure js. You can call updateScroll() (from https://stackoverflow.com/a/18614545/1309377) whenever a new message is added like in this example, or keep it on an interval of a second or something.

element.scrollTop = element.scrollHeight; will set the scroll of the dialog box to the total height of the div, thus keeping the scroll bar at the bottom.

document.getElementById("addMessage").addEventListener("click", addMessage);

function addMessage() {
  var chatInfo = document.getElementsByClassName("inner-chat-info")[0].outerHTML;
  var dialog = document.getElementsByClassName("dialog")[0];
  var currMsgs = dialog.innerHTML;
  dialog.innerHTML = currMsgs += chatInfo;
  updateScroll();
}

function updateScroll() {
  var element = document.getElementsByClassName("dialog")[0];
  element.scrollTop = element.scrollHeight;
}

.inner-chat-info {
  display: flex;
  align-items: center;
  display: -webkit-flex;
  margin-bottom: 10px;
  padding-top: 10px;
}

.chat-user-name {
  font-size: 16px;
  font-weight: bold;
  color: #2581bd;
}

.chat-user-data {
  margin-left: 12px;
}

.dialog-text {
  font-weight: 100;
  font-size: 16px;
}

.message-date {
  color: #bbbbbb;
  font-weight: 100;
}

.dialog {
  padding: 0 40px;
  height: 350px;
  overflow-y: scroll;
}

.send-msb-btn {
  margin-right: 10px;
}

<button id="addMessage">Add message</button>
<div class="dialog">
  <div class="inner-chat-info">
    <div class="chat-user-photo">
      <img class="" src="./assets/images/users/tom.png" alt="">
    </div>
    <div class="chat-user-data">
      <span class="chat-user-name">Hello hello </span>
      <span class="message-date">сHello hello :17</span>
      <div class="dialog-text">
        Hello hello
      </div>
    </div>
  </div>
  <div class="inner-chat-info">
    <div class="chat-user-photo">
      <img class="" src="./assets/images/users/leonardo.png" alt="">
    </div>
    <div class="chat-user-data">
      <span class="chat-user-name"> Hello hello </span>
      <span class="message-date">9:20</span>
      <div class="dialog-text">
        Hello hello
      </div>
    </div>
  </div>
  <div class="inner-chat-info">
    <div class="chat-user-photo">
      <img class="" src="./assets/images/users/tom.png" alt="">
    </div>
    <div class="chat-user-data">
      <span class="chat-user-name"> Hello hello  </span>
      <span class="message-date">10:20 </span>
      <div class="dialog-text">
        Hello hello
      </div>
    </div>
  </div>
  <div class="inner-chat-info">
    <div class="chat-user-photo">
      <img class="" src="./assets/images/users/leonardo.png" alt="">
    </div>
    <div class="chat-user-data">
      <span class="chat-user-name"> Hello hello  </span>
      <span class="message-date">Hello hello </span>
      <div class="dialog-text">
        Hello hello
      </div>
    </div>
  </div>
  <div class="inner-chat-info">
    <div class="chat-user-photo">
      <img class="" src="./assets/images/users/tom.png" alt="">
    </div>
    <div class="chat-user-data">
      <span class="chat-user-name"> Hello hello и </span>
      <span class="message-date">Hello hello </span>
      <div class="dialog-text">
        Hello hello
      </div>
    </div>
  </div>
  <div class="inner-chat-info">
    <div class="chat-user-photo">
      <img class="" src="./assets/images/users/tom.png" alt="">
    </div>
    <div class="chat-user-data">
      <span class="chat-user-name"> Hello hello  </span>
      <span class="message-date">Hello hello </span>
      <div class="dialog-text">
        :)
      </div>
    </div>
  </div>
</div>