AJAX 聊天、刷新和大量消息

Question

我现在正在自己编写一个ajax聊天程序。核心内容已经完成，但我遇到了两个问题：

1. 我每 2 秒检查一次新消息，如果有新消息，我会使用 .append() 将它们添加到父聊天窗口。但是每次我附加一个元素时，聊天都会闪烁，这既不美观也不可接受。并且，这导致我遇到第二个问题，重置元素的滚动。

2. 因为我希望聊天始终滚动到底部，所以我目前使用

   .animate({ scrollTop: $(document).innerHeight() }, 1);

   。但在消息或子元素达到一定数量时，滚动只会停留在中间......

我查了这两个问题，但还没有找到任何帮助。由于整个聊天都是我自己完成的，所以我用谷歌搜索了很多。

感谢您的任何建议或帮助，如何改进聊天！

编辑：附加代码

        `// For loop for every chat window
        for(i = 0; i < chatListArray.length; i++)
        {
            (function(id) {
                // Ajax call to get the chat history
                $.ajax({
                    type: "POST",
                    url: 'code/submit/submitGetChat.php',
                    data: "id=" + id,
                    success: function(data){              
                        $('#chatItemContent_' + id).empty(); // Clear the window
                        $('#chatItemContent_' + id).append(data); // Append the new chat history
                        $('#chatItemContent_' + id).animate({ scrollTop: $(document).innerHeight() }, 1); // scroll down to bottom, to display the latest messages
                    }
                });
            })(chatListArray[i]); // callback
        }`

Answer 1

当您滚动时，您将获得文档的高度，而不是要滚动的元素。你试过这个吗？

$('#chatItemContent_' + id).animate({ scrollTop: $('#chatItemContent_' + id).innerHeight() }, 1);

它会根据当前聊天窗口的高度设置scrollTop，而不是文档高度。