I am working with django , I want to scroll down auto when new messages added ‘sent or received’, I can scroll down auto when I refrech the page because of this code line :
$("#card-body").animate({ scrollTop: 20000000 }, "slow");
but when I send and I receive new messages the messages go down until I can’t see them I have to scroll down manually
this is the js code :
<script>
/* send message*/
document.getElementById('send-btn-id').onclick = function (e) {
const msg = document.getElementById('message').value;
chatSocket.send(JSON.stringify({
'message': msg,
'user': me,
'friend': friendName
}));
document.getElementById('message').value = "";
};
const friendName = JSON.parse(document.getElementById('friend').textContent);
const me = JSON.parse(document.getElementById('me').textContent);
/* set friend profile name */
document.getElementById('friend-name').innerHTML = friendName['username'];
/* start conversation */
document.querySelector('.start-conversation').innerHTML = 'Start conversation with <strong>'+friendName['username']+'</strong>';
/* connection request */
const chatSocket = new WebSocket(
'ws://'
+ window.location.host
+ '/ws/chat/'
+ friendName['username']
+ '/'
);
chatSocket.onmessage = function (e) {
const data = JSON.parse(e.data);
var class_name = 'in';
var profile_image = '{{friend_obj.profile.image.url}}';
if(me['username'] == data.user['username']) {
data.user['username'] = 'Me';
class_name = 'out';
profile_image = '{{request.user.profile.image.url}}';
}
var chat_list = document.querySelector('#chat-list-id');
var chat = "<li class=""+class_name+""><div class="chat-img"><img alt="avatarchat" src=""+profile_image+""></div><div class="chat-body"><div class="chat-message"><h5>"+data.user['username']+"</h5><p>"+data.message+"</p></div></div></li>";
chat_list.innerHTML += chat;
};
</script>
2
Answers
hello guys thanks to you I have found the solution and I want to share it with you and it works actually,so really thank you : I thought that I can actually make this code line in the send, hold on you will understand after watching the code : I have mentioned this before right
and this one either :
so after watching your answers I think to put the line in the //send message like this :
my english is not fine but the code works, I hope it helps someone facing same problem.
If you want to do this easily, you can do the following:
Thanks to this post
WHAT YOU SHOULD NOT DO
Even though the number is big, sometimes webpages can be VERY large.
BACK TO CONTENT
If you want it to scroll smoothly, then you can set this css property:
Working example: