javascript - 使用 jquery ajax $.load 防止自动 "scrolling up"

Question

我正在尝试使用 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);

Answer 1

更新哦，好吧，刚刚看到你直接将负载指向聊天框本身，所以你完全替换了它。所以你肯定会松开滚动位置。

尝试在该 .chatBox 周围添加一个容器，并将 .chatBox 的样式更改为该容器周围的样式(不要将其命名为 .chatBox)。

这是我的意思的一个示例(与您的第一个版本的 jsfiddle 相比):

http://jsfiddle.net/m72jJ/2/

希望对您有所帮助。

原帖看来问题出在jQuery的load方法上。

我创建了一个小示例，其中重置了全部内容，但未使用 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 渲染这个数组。但这将是一个更长的故事；)

希望对您有所帮助。

最好的问候，克里斯