使用高级滚动功能创建 AJAX 聊天。如何？答案

【问题标题】：Creating an AJAX chat with advanced scrolling features. How?使用高级滚动功能创建 AJAX 聊天。如何？
【发布时间】：2011-05-19 10:56:04
【问题描述】：

我需要一些使用示例来说明如何实现这一点。我有一些 HTML：

<div id="chatDisplay">
</div>
<input type="text" id="message" /><input type="button" id="send" value="Send" />

然后我有一些 JQuery：

// This function sets up the ajax that posts chat messages to the server.
$(function()
{
     $('#send').click(function ()
     {
          $.ajax(
          {
               url: "chat/postmsg",,
               data: { msg: $('#message').val(); },
               type: "POST",
               success: function (response)
               {
                    // Server sends back formated html to append to chatDisplay.
                    $('#chatDisplay').append(response);
                    //scroll to bottom of chatDisplay
               }
          });
     });
});

// This function periodically checks the server for updates to the chat.
$(function ()
{
     setInterval(function()
     {
          $.ajax(
          {
               url: "chat/getupdates",
               type: "POST",
               success: function (response)
               {
                         // Server sends back any new updates since last check.
                         // Perform scroll and data display functions. Pseudo-code to follow:

                         // If (chatDisplay is scrolled to bottom)
                         // {
                         //     append response to chatDisplay
                         //     scroll to bottom of chatDisplay
                         // }
                         // else if (chatDisplay is scrolled up from bottom by any amount)
                         // {
                         //     append response to chatDisplay, but do not scroll to bottom.
                         // }
               }
          });
     }, 7000);
});

这只是基本聊天功能的一个示例，当然不包括服务器端代码。我需要的是如何完成伪代码描述的使用示例。如何检测用户是否滚动到 DIV 的底部，以及如何将它们滚动到底部？如果他们向上滚动查看聊天记录，我不希望他们跳到 DIV 的底部。

我听说过 JQuery 的 ScrollTo 插件，但只是需要一些例子。

提前致谢！

编辑：这是为感兴趣的人提供的解决方案。

success: function (response)
{
     var elem = $('#chatDisplay');
     var atBottom = (elem[0].scrollHeight - elem.scrollTop() == elem.outerHeight());
     $('#chatDisplay').append(response);
     if (atBottom)
          $('#chatDisplay').scrollTop($('#chatDisplay')[0].scrollHeight);
}

转到http://www.jsfiddle.net/f4YFL/4/ 以获取此操作的示例。

【问题讨论】：

Ty，对于这篇文章。但是，给定的解决方案对我不起作用。也许是因为，我使用html 标签作为elem。但是，找到了解决方法：var atBottom = ($(window).height() + elem.scrollTop() == elem.outerHeight());。也许有人需要它:)

标签： html ajax jquery-plugins jquery

【解决方案1】：

似乎您可以将伪代码重构为：

将响应附加到 chatDisplay if(chatDisplay at the bottom){ 滚动到底部 }

这里是如何判断是否滚动到底部的链接：

http://yelotofu.com/2008/10/jquery-how-to-tell-if-youre-scroll-to-bottom/

希望对您有所帮助。

鲍勃

【讨论】：

谢谢，但我没有要求重构我的伪代码，目标很明确。我要求在伪代码所在方法的上下文中提供实际示例。这就是为什么我提供了如此多的上下文信息，以便有人可以在我提供的代码中给我相当具体的示例。
您需要检查滚动底部的代码在我引用的帖子中。在追加之前使用该代码检查底部。附加您的内容。如果您在底部，请使用该文章中的代码进行滚动。
很抱歉，我只是不喜欢与外部资源链接作为整个答案。我花时间定制了一个详细的问题，至少有人可以花时间定制一个稍微详细的答案，而不是提供链接并希望打勾。
@Chevex 我希望您没有要求他提供您可以复制/粘贴到您所拥有的代码中的确切代码。 rcravens 提供的链接为您提供所需的一切。