使用高级滚动function创建AJAX聊天。 怎么样？

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

然后我有一些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); }); 

这只是基本聊天function的一个示例，当然不包括服务器端代码。 我需要的是如何完成伪代码描述的用法示例。 如何检测用户是否滚动到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/以获取此示例。

Answer 1

好像你可以将你的伪代码重构为：

追加对chatDisplay的响应if（chatDisplay在底部）{滚动到底部}

以下是如何确定是否滚动到底部的链接：

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

希望有所帮助。

短发