我正在尝试用jquery和php构建一个ajax聊天。除了滚动之外，一切都很好。基本上，当聊天的内部内容将自动重新加载时，我已经设置了一个超时，但如果我在滚动，这会使聊天框一直向上滚动。以下是没有许多li（消息）的代码（它们是用php加载的）：
http://jsfiddle.net/m72jJ/1/
这里有一个实时版本，你可以自己看到（在jsfiddle中不会出现向上滚动）：
http://alfie.co.nf/templates/sandbox/php/Ajax-chat/
这是Jquery：
var form = $('form');
form.submit(function(event){
event.preventDefault();
var username = form.find('input[name=user]').val(),
messform = form.find('input[name=message]')
mess = messform.val(),
url = form.attr('action');
var posting = $.post(url, {message : mess , user : username});
posting.done(function(data){
var content = $(data).find('.chatBox');
$('.chatBox').empty().append(content).fadeIn();
messform.val("").fadeIn();
});
})
function checkNewMessages(){
$('.chatBox').load(" .chatBox");
}
setInterval(checkNewMessages, 500);
更新哦，好吧，刚刚看到你直接把负载指向聊天框本身，所以你完全替换了它。所以你肯定松开了卷轴的位置。
尝试在该.chatBox周围添加一个容器，并将.chatBox的样式更改为该容器周围的容器（不要将其命名为.chatBox）。
以下是我的意思的一个例子（与您的第一个版本的jsfiddle相比）：
http://jsfiddle.net/m72jJ/2/
希望能有所帮助。
原始帖子问题似乎出在jQuery加载方法上。
我创建了一个小示例，其中重置了整个内容，但没有使用ajax或$.load:
http://jsfiddle.net/aYbsQ/
HTML:
<div id="OuterContainer">
<div id="ContentContainer">
</div>
</div>
JavaScript:
jQuery(document).ready(function() {
var lineCount = 0;
var outerContainer = $('#OuterContainer');
var contentContainer = $('#ContentContainer');
var updateContent = function () {
contentContainer.empty();
for (var index = 0; index < 50; index++){
lineCount++;
contentContainer.html(contentContainer.html() + '<p>' + lineCount + ': One chat content line</p>');
}
}
window.reloadInterval = setInterval(function() { updateContent(); }, 1000);
});
也许您应该在PHP脚本中创建一个ajax端点，其中只显示消息，这样您就可以使用标准的$.ajax调用，并使用$（element）.HTML（）.放置生成的HTML
无论如何，在我看来，我会将消息加载从纯HTML更改为JSON，并将聊天消息缓存在客户端上，只从服务器发送新消息。这将减少传输的数据量。这可以通过使用像KnockoutJs这样的框架来轻松实现，在该框架中填充observableArray并使用knockout渲染该数组。但这将是一个更长的故事；）
希望能有所帮助。
谨致问候，Chris