我有一个页面显示消息，我希望它像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);
}
});
编辑：我注意到你想要一个按钮。你可能要多做点数学：
$(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);
});
