将dom添加到顶部时如何保持滚动位置

Question

当将DOM添加到父DOM的顶部时，我遇到了滚动位置的问题。 当滚动位置位于顶部时，滚动位置将自动设置为顶部（targetDOM.scrollTop == 0）。

如果滚动位置为1或更大（targetDOM.scrollTop> 0），则不会发生此问题。

如果滚动位置在顶部，我想防止滚动位置自动变为顶部。

有解决方案吗？

示例添加DOM

var i = 1;
function addDom(){
  var content = document.getElementById('content');
  for (j = i; j <= i + 9; j++) {
    var dom = document.createElement('div');
    dom.innerHTML= j;
    content.appendChild(dom);
    content.insertBefore(dom, content.firstChild);
  }
  i = j;
}

码笔

Answer 1

您应该保存当前滚动位置和滚动大小。 然后添加元素。 获取新的滚动条大小并将滚动条位置设置为旧位置加上（新滚动条大小减去旧滚动条大小）：

var i = 1;
function addDom(){
  var content = document.getElementById('content');

  var curScrollPos = content.scrollTop;
  var oldScroll = content.scrollHeight - content.clientHeight;

  for (j = i; j <= i + 9; j++) {
    var dom = document.createElement('div');
    dom.innerHTML= j;
    content.appendChild(dom);
    content.insertBefore(dom, content.firstChild);
  }

  var newScroll = content.scrollHeight - content.clientHeight;
  content.scrollTop = curScrollPos + (newScroll - oldScroll);

  i = j;
}

在Chrome和FF上测试

码笔