I'm creating a chat initially in PHP in which in the div called Message I load the conversation that was generated.
Through JavaScript/Ajax, I access the PHP file and bring up the conversation that was recorded, putting the data from this file in the Message div. For obvious reasons, after a message number X, a scroll is generated in this div. Using CSS, I set up an overflor:auto that generates the vertical scroll.
Initially, I couldn't get the scroll bar to go down, showing the last message sent. Using the code below, I managed to do this...
$(document).ready(function()
{
setInterval(function(){
readMessage();
var textArea = document.getElementById('Message');
textArea.scrollTop = textArea.scrollHeight;
},1000);
});
However, if I want to read a previous message, above and outside the field of view, when manually moving up the scroll (by clicking on the scrollbar and up OR on the mouse, scrolling up), the code above makes the scroll come down, not allowing me to read what I want from the conversation.
How can I solve this problem?
simply use setTimeout instead, and then start the timeout again after scrolling
$(document).ready(function()
{
setTimeout(scrol,1000);
function scrol() {
readMessage();
var textArea = document.getElementById("Message");
textArea.scrollTop = textArea.scrollHeight;
setTimeout(scrol,1000);
}
}
please let me know if this works, as well as if I make any syntax or convention errors as I'm very familiar with javascript but very new to jQuery