Javascript 添加新邮件时自动向下滚动

我将添加我的消息，它将自动添加到文本区域，并向下滚动。我有自己的代码。但它似乎不起作用。我也试过这个代码，但很难操作

编辑：
发送

var onKeyDown=函数（e）{
如果（e.which==13）{
e、 预防默认值（）；
submitChat（）；
$（“#面积”）.val（“”）；
}
};
$（“#面积”）。on（“按键按下”，on按键按下）；
函数submitChat（）{
if（form1.msg.value=''）{//如果其中一个字段为空，则告诉函数退出
警报（“所有区域都是强制性的”）；
返回；
}
form1.uname.readonly=true；
form1.uname.style.border='none'；
$（'#imageload'）.show（）；
var uname=form1.uname.value；//将值pf字段存储到js变量中，该变量将传递给insert.php myimage
var msg=form1.msg.value；
var myimage=form1.myimage.value；
var room=form1.room.value；
var xmlhttp=new XMLHttpRequest（）；
xmlhttp.onreadystatechange=函数（）{
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（）；
}
$（文档）.ready（函数（e）
{
$.ajaxSetup（{cache:false}）；
setInterval（function（）{$（'#chatlogs'）.load（'logs.php'）；}，2000）；
});

在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);

你可以用

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

---

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

如果我是您，我会在CSS中为我的元素设置一个

overflow-y:scroll

，并将以下内容添加到我的成功回调中

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

我在React应用程序中使用它，它工作得相当好。只需确保在滚动元素之前添加了消息。

这对我很有效

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

---

我把var“element=document.getElementById（“#chatlogs”）放在哪里；在你的设置间隔中，你的设置间隔在底部。我也在我的答案中包含了这一点。是的，你使用了jquery

scrollTop

任何我可以帮助你解决的与这个问题相关的问题？这正是我所说的，但无法将其修正到我的代码中。当我尝试向上滚动聊天框时，它总是向下滚动。这对maki不好ng Chatbox这很有用。对于那些想要更多控制的人，他们可以添加一个条件，如果客户端不在滚动的底部，那么它就不应该自动滚动。

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