javascript - 移除 DOM 元素时防止视口(viewport)移动

Question

我正在尝试实现一个 HTML 无限滚动器，其中在任何给定时间列表中只有少数 div 元素(以保持内存占用小)。

我在列表中添加了一个新的 div 元素，同时删除了第一个元素，因此 div 的总数保持不变。

不幸的是，视口(viewport)并没有保持静止，而是向后跳了一点(实际上是删除的 div 的高度)。 有没有办法在从列表中删除 div 的同时保持视口(viewport)静止？

我制作了一个小型的独立 HTML 页面(好吧，它仍然需要 JQuery 3.4.1)，它暴露了问题:它首先添加 5 个 div，然后它不断添加一个新的，每 1 秒删除第一个

function getRandomColor() {
  var letters = '0123456789ABCDEF';
  var color = '#';
  for (var i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
}

function removeit() {
  // remove first one
  var tiles = $(".tile");
  $(tiles[0]).remove();
}

function addit() {
  // append new one
  var jqueryTextElem = $('<div class="tile" style="height:100px;background-color:' + getRandomColor() + '"></div>');
  $("#inner-wrap").append(jqueryTextElem);
}

function loop() {
  removeit();

  addit();

  window.setTimeout(loop, 1000);
}

addit();
addit();
addit();
addit();
addit();

loop();

<div id="inner-wrap"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

Answer 1

可以临时给父元素加上position: fixed:

1. 首先将position: fixed添加到父级；
2. 然后删除该元素；
3. 然后从父级中删除position: fixed