jquery - 保持窗口不改变滚动位置,同时将项目添加到列表中？

Question

我有一个页面显示消息,我希望它像Facebook一样工作,但没有懒惰的加载器.消息按时间顺序显示,最近一次显示.

我的消息列表最初填充了x个最新消息,窗口滚动到底部.当用户开始阅读该帖子时,他们会从下到上阅读.如果他们到达顶部,他们可以加载更多消息...我让他们点击一个按钮... facebook有一个懒惰的加载器.新消息将添加到列表中.

问题:由于新消息被添加,现有消息被推下,导致用户失去"查看"位置.在添加新消息时,如何保持用户当前的视图位置？例如,在Facebook中打开一个长消息线程,滚动到顶部导致添加新消息...即使滚动位置确实如此,您的视图位置也不会改变.

Answer 1

在添加新消息之前存储对第一条消息的引用,在前置之后,将滚动设置为该消息的偏移量:

$(document).on('scroll', function() {
    var scroll = $(document).scrollTop();
    if (scroll < 1) {
        // Store eference to first message
        var firstMsg = $('.message:first');

        // Prepend new message here (I'm just cloning...)
        $('body').prepend(firstMsg.clone());

        // After adding new message(s), set scroll to position of
        // what was the first message
        $(document).scrollTop(firstMsg.offset().top);
    }
});

演示:http: //jsfiddle.net/GRnQY/

编辑:我注意到你想要一个按钮.你可能需要做更多的数学运算:

$(document).on('click', '#loadMore', function() {
    var firstMsg = $('.message:first');

    // Where the page is currently:
    var curOffset = firstMsg.offset().top - $(document).scrollTop();

    // Prepend
    firstMsg.before(firstMsg.clone());

    // Offset to previous first message minus original offset/scroll
    $(document).scrollTop(firstMsg.offset().top-curOffset);
});

演示:http: //jsfiddle.net/GRnQY/5/

Answer 2

这里不需要jQuery,只需检查元素scrollHeight中的更改并相应地调整scrollTop,即:

var lastScrollHeight = el.scrollHeight;
for(var n=0; n<10; n++){
    // Prepend here...
}
var scrollDiff = el.scrollHeight - lastScrollHeight;
el.scrollTop += scrollDiff;

演示

http://jsfiddle.net/fkqqv28e/

jQuery的

要从jQuery集合访问本机DOM节点,请使用数组访问; 即:

var lastScrollHeight = $('#myElement')[0].scrollHeight;
for(var n=0; n<10; n++){
    $('#myElement').prepend('<div>prepended '+Math.random()+'</div>');
}
var scrollDiff = $('#myElement')[0].scrollHeight - lastScrollHeight;
$('#myElement')[0].scrollTop += scrollDiff;

Answer 3

一些来到这里的人可能只想添加内容而不需要当前的焦点跳跃。修改上面 Jeff B 的演示以使用 click 事件目标使这个习语更易于移植：

someButton.on('click', function() {
    var curOffset = $(this).offset().top - $(document).scrollTop();
    // add content to your heart's content.
    $(document).scrollTop($(this).offset().top-curOffset);
});

参见http://jsfiddle.net/bwz8uLvt/1/（上面 Jeff B 演示的变体，但在页面中的任意点有 [add more] 按钮）。