javascript - 将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;
}

codepen

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 上测试

codepen