创建Ajax聊天先进的滚动功能。怎么样? [英] Creating an AJAX chat with advanced scrolling features. How?
问题描述
我需要如何做到这一点的一些用法示例。我有一些HTML代码:
I need some usage examples for how to accomplish this. I have some HTML:
<div id="chatDisplay">
</div>
<input type="text" id="message" /><input type="button" id="send" value="Send" />
然后,我有一些jQuery:
Then I have some 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);
});
这是基本的聊天功能,但不包括服务器端$ C $当然了C只是一个例子。我需要的是如何完成的伪code描述了一个使用样本。如何检测,如果用户滚动到DIV的底部,以及如何滚动它们的底部?我不希望他们被跃升至DIV的底部,如果它们滚动起来看看聊天记录。
This is just an example of basic chat features, excluding server-side code of course. What I need is a usage sample of how to accomplish what the pseudo-code describes. How do I detect if the user is scrolled to the bottom of the DIV, and how do I scroll them to the bottom? I don't want them to be jumped to the bottom of the DIV if they are scrolling up to look at chat history.
我听说过jQuery的ScrollTo插件,只是需要一些例子。
I have heard of JQuery's ScrollTo plugin, but just need some examples.
在此先感谢!
编辑:这是为那些有兴趣的解决方案
Here is the solution for those interested.
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/ 了解对这个动作的一个例子。
Go to http://www.jsfiddle.net/f4YFL/4/ for an example of this in action.
推荐答案
好像可以重构伪code到这一点:
Seems like you can refactor your pseudo-code to this:
追加响应chatDisplay 如果(chatDisplay在底部){滚动到底}
append response to chatDisplay if(chatDisplay at the bottom){ scroll to the bottom }
下面是如何确定,如果您滚动到下一个链接:
Here is a link of how to determine if you are scrolled to the bottom:
的http:// yelotofu .COM / 2008/10 / jQuery的 - 如何对告诉-IF-您选择,滚动到下/
希望有所帮助。
鲍勃·
这篇关于创建Ajax聊天先进的滚动功能。怎么样?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!