添加新消息时自动向下滚动

Question

我将添加我的消息，它将自动添加到textarea中，并且它将向下滚动。我有自己的代码。但似乎不起作用。我也尝试过此代码，但是很难操作。 Here

编辑： 发送

<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

您可以使用

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

如果您在单独的元素中有邮件（应该）。

Answer 2

在您的ajax成功回调中，您可以使用自动滚动div元素：

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

element.scrollTop = element.clientHeight;

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

基于div的高度，它将滚动到div的底部。

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

Answer 3

如果我是你，我会在CSS中为元素添加overflow-y: scroll并将以下内容添加到我的成功回调中

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

我在React应用程序中使用它，并且效果很好。只需确保在滚动元素之前添加了消息即可。

Answer 4

这对我有用

//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;
}