自动滚动到ajax

Question

我为我的用户制作了一个实时聊天网站。我通过ajax获取聊天消息。 每当我输入新消息时，它都会被添加到数据库中并显示，但滚动不会显示在结果的底部。

以下是这个例子： - 当我输入新消息时。卷轴不会到达底部。

当我手动滚动时，我会收到所有消息。

这是我的HTML div，其中数据是通过ajax获取的。

<div id="chat">

</div>

我试过这个，但它没有用。

window.setInterval(function(){
  var elem = document.getElementById('chat');
  elem.scrollTop = elem.scrollHeight;
}, 1000);

获得结果的最佳方式是什么？

Answer 1

在父元素（或具有滚动条的元素）上设置滚动位置：

<div id="container">

  <div id="chat">

  </div>

</div>

-

window.setInterval(function(){
  var elem = document.getElementById('container');
  elem.scrollTop = elem.scrollHeight;
}, 1000);

Answer 2

我做的比我要求的多一点，但这是我的答案。请注意，我没有包含AJAX函数，而是使用第一条消息作为模板，并且只是一遍又一遍地插入来模拟来自AJAX的新消息。您将使用AJAX函数替换行$('#msg-template').clone()...，并且在AJAX之后运行的完成函数应包含下一行：if(autoScroll){ ScrollChat(); }。

小提琴也有评论（以及一些HTML和CSS）：http://jsfiddle.net/mmwu1920/

var autoScroll = true;

function ScrollChat(){
    $('#chat').scrollTop($('#chat')[0].scrollHeight).trigger('scroll');
}

function RefreshMessages(){
    $('#msg-template').clone().appendTo('#chat');
    if(autoScroll){ ScrollChat(); }
}
setInterval(RefreshMessages, 1000);

ScrollChat();

$('#chat').on('scroll', function(){
    if($(this).scrollTop() < this.scrollHeight - $(this).height()){
        autoScroll = false;
    }
    else{
        autoScroll = true;
    }
});