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

Question

我有一个用作新闻提要的 meteor.js 应用程序，可以发布话题，人们可以实时评论话题。这意味着当您查看帖子时，将在帖子上方和下方添加新评论，并且在上方添加新话题。这会将您正在关注的帖子向下推到视口(viewport)之外，这是意想不到的(除非您已经滚动到顶部)。

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

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>

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

Here's a blog post描述了一个类似的方法，以及一个 similar SO question .