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

【问题标题】：Auto scroll down when new message is added添加新消息时自动向下滚动
【发布时间】：2015-06-17 14:46:56
【问题描述】：

我要添加我的消息，它会自动添加到 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);


});

【问题讨论】：

标签： javascript jquery html ajax

【解决方案1】：

你可以使用

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

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

【讨论】：

当我尝试向上滚动聊天框时，它总是向下滚动。这不利于制作聊天框
这很有用。对于那些想要进行更多控制的人，他们可以添加一个条件，如果客户端不在滚动的底部，那么它不应该自动滚动。

【解决方案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);

【讨论】：

我把那个 var 放在哪里" element = document.getElementById('#chatlogs');
在底部的 setInterval 中。我也将其包含在我的答案中。
是的，你用过 jquery scrollTop
关于这个问题还有什么我可以帮助你的吗？
这正是我所说的jsfiddle.net/NgdNz/6，但无法将其修复到我的代码中。

【解决方案3】：

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

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

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

【讨论】：

【解决方案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;
}

【讨论】：