在当前dom之前添加dom，并保持当前dom保持在视口中

Question

假设有一个滚动列表，当我插入一些新的DOM追加到当前的dom时，它工作正常。 上拉

但是如果我之前插入一些新的DOM，新的DOM将在视口中，而旧的DOM将被推下。 下拉

有没有办法让pulldown像pullup一样？没有手动设置scrollTop？

Answer 1

在Google Chrome中，我无法重现您描述的行为。浏览器在DOM编辑时如何管理维护滚动位置会有区别吗？

在Safari中，我确实看到了您描述的行为。我不知道有任何不同的注入方法可以绕过这个问题，我不认为像translateY或position: absolute这样的类似CSS的技巧是可行的......

所以，这会让我们看到你说你不想使用的一个选项...修改scrollTop。我没有看到像这样的方法有很多问题......

function scrollSafeInsertBefore(fragment, el, scrollContainer) {
  var scroller = scrollContainer || document.body;
  var parent = el.parentElement;
  var aboveScroll = el.getBoundingClientRect().top < 0;

  if (aboveScroll) {
    var st = parent.scrollHeight;
    parent.insertBefore(fragment, el);

    var dy = parent.scrollHeight - st;
    scroller.scrollTop += dy;   // Move back the height change
  } else {
    parent.insertBefore(fragment, el); // Normal injection
  }
}

小提琴：https://jsfiddle.net/pq4t2zbn/（按插入按钮）