I'm having an issue with a div that has a scrollbar. Initially, the div scrolls to the bottom when loaded. However, after making a post request and loading new ajax data, it no longer scrolls to the bottom properly. It seems to be going to the "previous" bottom before adding the ajax data. Can anyone provide assistance with this?
<div id='messages'>
<div id='message_box'>
text messages
</div>
</div>
// This script ensures that the page starts with the div scrolling to the bottom
$(document).ready(function() {
var objDiv = document.getElementById("messages");
objDiv.scrollTop = objDiv.scrollHeight;
})
// Although the ajax post request works, the scrolling to bottom in the success method is not functioning correctly
// It scrolls to the second last message instead of the last one, how can this be fixed?
var url_link = window.location.href;
$.ajax({
data: {
'text': 'text'
},
type: "POST",
url: url_link,
success: function() {
$('#message_box').load(url_link + ' #message_box');
var objDiv = document.getElementById("messages");
objDiv.scrollTop = objDiv.scrollHeight;
},
error: function(e) {
console.log("Bad request: " + e);
}
#messages {
overflow-y: scroll;
width: 100px;
height: 250px;
}
To summarize, the problem is that the message div does not scroll to the bottom of the div after the ajax post method. Instead, it stops at the second last message, requiring manual scrolling down to see the latest message. Any suggestions on how to resolve this would be greatly appreciated. Thank you.