在上方和下方添加新内容时锁定滚动

Question

我有一个meteor.js用作新闻源的应用程序,其中发布了线程并且人们实时评论线程.这意味着当您查看帖子时,会在上方和下方的帖子中添加新评论,并在上方添加新帖子.这将推动您正在关注的视频向下并离开视口,这是从未预料到的(除非您已经滚动到顶部).

更新滚动以保持与添加新内容相同的视觉中心的最佳方法是什么？

Answer 1

你可以尝试这个方法：

1. 保存该scrollTop值；
2. 预先添加内容（即，在重点内容上方添加新帖子）；
3. 将新内容的高度添加到步骤1中保存的值；
4. 滚动到新值。

这是一个例子：

function randomString() {
  return Math.random().toString(36).substring(7);
}

$('#addAbove').on('click', function(e){
  var newDiv = $('<li class="post">' + randomString() + '</li>');
  var savedScrollTop = $('#content').scrollTop();
  $('#content').prepend(newDiv);
  $('#content').scrollTop(savedScrollTop + newDiv.height());
});

$('#addBelow').on('click', function(e){
  var newDiv = $('<li class="post">' + randomString() + '</li>');
  $('#content').append(newDiv);
});

#content {
  height: 100px;
  overflow-y: scroll;
}
.post {
  height: 40px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="content">
  <li class="post">u9tv190be29</li>
  <li class="post">dgdr8gp66rp</li>
  <li class="post">93vfntdquxr</li>
</ul>
<button id="addAbove">Add Above</button>
<button id="addBelow">Add Below</button>

在当前视口下方附加内容不需要调整。

这是一篇描述类似方法的博客文章，以及一个类似的 SO 问题。