Auto scroll down when new message is added

Question

I am going to added my message and it will be automatically added to textarea and it will scroll down .I have my own codes.But it seems does not work. I tried also this code, but hard to manupulate. Here

EDIT:
Send

<textarea name="msg" id="area" ></textarea><br/>
<a href="#" onclick="submitChat()"> Send </a>


    <div id="chatlogs">
    </div>




var onKeyDown = function(e) {
  if (e.which == 13) {
    e.preventDefault();

    submitChat();
     $("#area").val("");
  }
};

$("#area").on("keydown", onKeyDown);

function submitChat(){

    if( form1.msg.value ==''){ //tell the function to exit if one of the fields are blank
    alert("All fiels are mandatory");
    return; 
    }

    form1.uname.readonly=true;
    form1.uname.style.border='none';
    $('#imageload').show();

    var uname= form1.uname.value;  //storing the value pf fields into js variable which will pass on insert.php myimage
    var msg = form1.msg.value;
    var myimage = form1.myimage.value;
var room = form1.room.value;

    var xmlhttp = new XMLHttpRequest();

    xmlhttp.onreadystatechange = function(){
        if(xmlhttp.readyState == 4 && xmlhttp.status ==200)
        {
         document.getElementById('chatlogs').innerHTML = xmlhttp.responseText;
            $('#imageload').hide();
        }

    }

    xmlhttp.open('GET','insert.php?uname='+uname+'&msg='+msg+'&myimage='+myimage+'&room='+room,true);
    xmlhttp.send();
}


$(document).ready(function(e)
{

    $.ajaxSetup({cache:false});
    setInterval(function() {$('#chatlogs').load('logs.php');}, 2000);


});

Answer 1

You may use

document.getElementById('chatlogs').lastChild.scrollIntoView(false)

if you have messages in separate elements (you should).

Answer 2

In your ajax success callback, you can use auto scroll the div element:

var element = document.getElementById('chatlogs');

element.scrollTop = element.clientHeight;

//You can even use 
// element.scrollTop = element.scrollHeight;

Based on div height, it will scroll to the bottom of the div.

setInterval(function() {
    $('#chatlogs').load('logs.php');
    var element = document.getElementById('chatlogs'); 
    element.scrollTop = element.clientHeight;
}, 2000);

Answer 3

If I were you, I'd give my element an overflow-y: scroll in my CSS and add the following to my success callback

var element = document.getElementById('chatlogs');
element.scrollTop = element.scrollHeight;

I'm using it in a React application and it works fairly well. Just make sure the message is added before you scroll the element.

Answer 4

This worked for me

//check condition before inserting messages into chatbox div
if(window.pageYOffset+740==html.scrollHeight)
{
   flag=true;
}
/*


append messages into the chatbox

*/

//now if the user is in the last child it will scroll
if(flag)
{
   html.scrollTop=messages.scrollHeight;
            flag=false;
}