title: Prevent viewport from moving when removing DOM elements
body: <p>I'm trying to implement an HTML infinite scroller in which at any given time there are only a handful of div elements on list (to keep the memory footprint small).</p>
  
  <p>I append a new div element to the list and at the same time I'm removing the first one, so the total count of divs remains the same.</p>
  
  <p>Unfortunately the viewport doesn't stay still but instead it jumps backwards a little bit (the height of the removed div actually).
  Is there a way to keep the viewport still while removing divs from the list?</p>
  
  <p>I made a small self contained HTML page (well, it still needs JQuery 3.4.1) which exposes the problem: it starts by adding 5 divs and then it keeps adding a new one and removing the first one every 1 second</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function getRandomColor() {
    var letters = '0123456789ABCDEF';
    var color = '#';
    for (var i = 0; i &lt; 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 = $('&lt;div class="tile" style="height:100px;background-color:' + getRandomColor() + '"&gt;&lt;/div&gt;');
    $("#inner-wrap").append(jqueryTextElem);
  }
  
  function loop() {
    removeit();
  
    addit();
  
    window.setTimeout(loop, 1000);
  }
  
  addit();
  addit();
  addit();
  addit();
  addit();
  
  loop();</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="inner-wrap"&gt;&lt;/div&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>