將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上測試

碼筆