jquery – 保持窗口改变滚动位置,同时将项目列入列表？

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

我的消息列表最初填充了x个最近的消息，窗口滚动到底部。当用户开始阅读线程时，他们从下到上读取。如果他们到达顶部，他们可以加载更多的消息…我让他们点击一个按钮… Facebook有一个懒惰的装载机。新邮件已列入清单。

问题：当新邮件被添加到前面时，现有邮件被按下，导致用户丢失“查看”地点。当我添加新消息时，如何保持用户的当前视图位置？例如，在Facebook中打开一个长消息线程，滚动到顶部，导致添加新消息…您的视图位置不会改变，即使滚动位置。

解决方法

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

$(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/

原文地址：https://www.jb51.cc/jquery/181810.html