javascript getBoundingClientRect() values are wrong for dynamically added elements
<p>Not able to find an answer on wide web so posting the question here. </p>

<p><strong>What I am trying to achieve:</strong> </p>

<p>When the user scrolls to the very bottom of the page get the latest dynamically loaded element's bottom value and use it to find out if it is time to load another one.</p>

<p>The math is simple:</p>

<pre><code>if (element.getBoundingClientRect().bottom &lt;= window.innerHeight)
   loadAnotherElement();
</code></pre>

<blockquote>
  <p>window.innerHeight is 955px</p>
</blockquote>

<p><strong>The problem:</strong></p>

<p>On initial load the the first element's bottom value is <code>905px</code> which is fine and trigger the function to load another one, but after the second one is loaded in the bottom value is <code>1389px</code> which will never trigger the <code>loadAnotherElement</code> function.</p>

<p>I am not able to post full code as it is too complicated so hope the above will be enough to understand.</p>

<p><strong>EDIT</strong></p>

<p>Managed to create a proper <a href="https://jsfiddle.net/ebmkhjkg/2/" rel="noreferrer">test case</a></p>