Chat Box, Auto Scroll to Bottom

Chat box, auto scroll to bottom

Add this to your code:

$(".msg_container_base").stop().animate({ scrollTop: $(".msg_container_base")[0].scrollHeight}, 1000);

So the submit click function looks like this:

$("#submit").click(function() {
    var data = $("#btn-input").val();
        //console.log(data);
        $('chat_log').append('<div class="row msg_container base_sent"><div class="col-md-10 col-xs-10"><div class="messages msg_receive"><p>'+data+'</p></div></div></div><div class="row msg_container base_receive"><div class="col-md-10 col-xs-10"><div class="messages msg_receive"><p>'+data+'</p></div></div></div>');
        clearInput();
        $(".msg_container_base").stop().animate({ scrollTop: $(".msg_container_base")[0].scrollHeight}, 1000);
});

JSFiddle DEMO

Automatically scroll down chat div

Let's review a few useful concepts about scrolling first:

scrollHeight: total container size.
scrollTop: amount of scroll user has done.
clientHeight: amount of container a user sees.

When should you scroll?

User has loaded messages for the first time.
New messages have arrived and you are at the bottom of the scroll (you don't want to force scroll when the user is scrolling up to read previous messages).

Programmatically that is:

if (firstTime) {
  container.scrollTop = container.scrollHeight;
  firstTime = false;
} else if (container.scrollTop + container.clientHeight === container.scrollHeight) {
  container.scrollTop = container.scrollHeight;
}

Full chat simulator (with JavaScript):

https://jsfiddle.net/apvtL9xa/

const messages = document.getElementById('messages');
function appendMessage() { const message = document.getElementsByClassName('message')[0];  const newMessage = message.cloneNode(true);  messages.appendChild(newMessage);}
function getMessages() { // Prior to getting your messages.  shouldScroll = messages.scrollTop + messages.clientHeight === messages.scrollHeight;  /*   * Get your messages, we'll just simulate it by appending a new one syncronously.   */  appendMessage();  // After getting your messages.  if (!shouldScroll) {    scrollToBottom();  }}
function scrollToBottom() {  messages.scrollTop = messages.scrollHeight;}
scrollToBottom();
setInterval(getMessages, 100);

#messages {  height: 200px;  overflow-y: auto;}

<div id="messages">  <div class="message">    Hello world  </div></div>

Scroll to bottom when new message added

This worked for me:

outputArea[0].scrollTop = 9e9;

Chat box scroll to bottom?

To make it animated you can use the jQuery .animate() function.

Use:

var log = $('#chatlog');
log.animate({ scrollTop: log.prop('scrollHeight')}, 1000);

jsFiddle Example: http://jsfiddle.net/00xsrck8/

Or without animation use:

var log = $('#chatlog');
log.animate({ scrollTop: log.prop('scrollHeight')}, 0);

Used the provided css to accomplish this task. Please see jsfiddle: http://jsfiddle.net/00g2LnqL/

Chat scroll to bottom when send a message using React

You can simply use an effect with itemsChat as dependency. Just grab the chat ul element and scroll to the bottom.

useEffect(() => {
    document.querySelector('.ui-chat').scrollTop = document.querySelector('.ui-chat').scrollHeight
  }, [itemsChat])

Working copy of your code is here

Auto scroll a chatbox with css

You need to do the scrolling after appending the new message in the DOM

socket.on('chatMessage', function (data) {
    var messages = $('#chatbox-listMessages'),
        messagesNode = messages[0];
    messages.append(userMessage(data.username, data.message));
    messagesNode.scrollTop = messagesNode.scrollHeight;
});

How to Scroll to bottom of div (chat) - synchronously

You can use Vue.nextTick(callback) to wait for the DOM to be updated after pushing the new message before you trigger the scroll. Something like this ..

this.messages.push(this.currentMessage) //adding new message to the list
Vue.nextTick(function () {
    var div = document.getElementById('chat-list-ul');
    div.scrollTop = div.scrollHeight;
})

Chat Box, Auto Scroll to Bottom