Auto scroll down при добавлении нового сообщения

Question

Я собираюсь добавить свое сообщение, и оно будет автоматически добавлено в textarea, и оно будет прокручиваться вниз. У меня есть свои собственные коды. Но похоже, что это не работает. Я тоже пробовал этот код, но его трудно было создать. Here

EDIT:
Отправить

<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

В вашем АЯКСЕ обратного вызова, вы можете использовать автоматические прокрутки DIV элемента:

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

element.scrollTop = element.clientHeight; 

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

Основываясь на высоту сНа, он будет прокручивать на дно дива.

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

Answer 2

Вы можете использовать

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

, если у вас есть сообщения в отдельных элементах (вы должны).

Answer 3

Если бы я тебя, я бы дать мой элемент в моем CSS в overflow-y: scroll и добавьте следующие строки в мой успех обратного вызова

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

Я его, используя в React приложения, и она работает достаточно хорошо. Просто убедитесь, что сообщение добавлено перед прокруткой элемента.