Question

我现在自己编写ajax聊天。核心的东西已经完成，但我遇到了两个问题：

我每隔2秒检查一次新消息，如果有新消息，我将.append（）添加到父聊天窗口。但是每当我添加一个元素时，聊天就会闪烁，这既不好看也不可接受。并且，这导致我遇到第二个问题，重置元素的滚动。
因为我希望聊天总是滚动到底部，所以我现在使用.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，而不是文档高度。

AJAX聊天，刷新和大量消息

1 个答案: