Automatic scroll bar

Good afternoon,

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?

Thank you very much in advance!