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
so
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;
})
Related Topics
Reload Table After Deleting an Item from It With React
React Enable Button After All Form Fields Are Not Empty
Convert Date String from Yyyymmdd to Dd Mon Yyyy
Detecting When User Scrolls to Bottom of Div With React Js
Add Parameters to Url Without Refresh
Detect If Html5 Video Element Is Playing
Reverse Strings Without Changing the Order of Words in a Sentence
One Time Page Refresh After First Page Load
How to Make an Empty String Array in Typescript
Finding the Symmetric Difference Between Two Arrays
How to Completely Remove Ionic and Cordova Installation from Mac
Make Angular.Foreach Wait for Promise After Going to Next Object
How to Add Scroll Event in React Component
How to Get the Difference Between Two Arrays of Objects in JavaScript
Maxlength Does Not Work React Js
How to Iterate Using Ngfor Loop Map Containing Key as String and Values as Map Iteration