添加DOM至父容器顶部时如何维持滚动位置？解决scrollTop=0异常

这个问题我之前也碰到过，本质是浏览器在元素插入后会自动调整滚动位置的默认行为——当父元素scrollTop为0时，新增顶部元素会让浏览器认为「内容顶部变化了」，从而强制把scrollTop重置为0。下面给你两个靠谱的解决方案：

方法一：记录高度差，精准恢复滚动位置 #

这是最稳妥的方式，核心思路是在添加元素前后记录父元素的滚动高度，计算新增元素带来的高度变化，然后手动调整scrollTop：

function addDom() {
  // 替换成你的父DOM元素选择器
  const parentEl = document.getElementById('parent-container');
  
  // 记录添加前的关键参数
  const originalScrollTop = parentEl.scrollTop;
  const scrollHeightBefore = parentEl.scrollHeight;

  // --- 你的原有添加DOM代码 ---
  let i = 1;
  const newContent = document.createElement('div');
  newContent.className = 'new-item';
  newContent.textContent = `新增内容 ${i++}`;
  parentEl.insertBefore(newContent, parentEl.firstChild);
  // --- 原有代码结束 ---

  // 仅在原scrollTop为0时调整
  if (originalScrollTop === 0) {
    const scrollHeightAfter = parentEl.scrollHeight;
    // 计算新增元素带来的高度差，设置scrollTop抵消这个变化
    parentEl.scrollTop = scrollHeightAfter - scrollHeightBefore;
  }
}

为什么这个方法有效？ #

当你在顶部插入元素时，父元素的scrollHeight会增加（等于新增元素的总高度）。原来scrollTop为0时，浏览器会把scrollTop重置为0，但我们手动设置scrollTop为高度差后，视觉上页面就不会向上跳转——相当于把「新增的顶部内容」滚出了可视区域，保持原来的内容位置不变。

方法二：临时修改scrollTop规避默认行为（简易版） #

如果你的场景比较简单，也可以用一个小技巧：在添加元素前先把scrollTop设为1，添加后再改回0。不过这个方法可能会有极轻微的视觉闪烁，适合对体验要求不极致的场景：

function addDom() {
  const parentEl = document.getElementById('parent-container');
  
  if (parentEl.scrollTop === 0) {
    // 临时设置scrollTop为1，规避浏览器默认行为
    parentEl.scrollTop = 1;
  }

  // --- 你的原有添加DOM代码 ---
  let i = 1;
  const newContent = document.createElement('div');
  newContent.textContent = `新增内容 ${i++}`;
  parentEl.insertBefore(newContent, parentEl.firstChild);
  // --- 原有代码结束 ---

  if (parentEl.scrollTop === 1) {
    // 恢复scrollTop为0
    parentEl.scrollTop = 0;
  }
}

注意事项 #

• 确保你选择的父元素是实际滚动的容器（比如设置了overflow: auto/scroll的元素），不要误选body或html，除非它们是滚动容器。
• 如果新增元素是异步加载的（比如从接口获取内容后插入），一定要在元素插入DOM树之后再执行滚动位置调整的代码。

内容的提问来源于stack exchange，提问作者betchi