Testing BoundingClientRect

Test if innerHeight is still correct when inserting new element

HTML

<section>
  <article>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </article>
</section>

CSS

html,
body {
  height: 100%;
}

* {
  box-sizing: border-box;
}

*:before,
*:after {
  box-sizing: border-box;
}

section {
  background: red;
  position: relative;
}

section:before,
section:after {
  content: " ";
  display: table;
}

section:after {
  clear: both;
}

div {
  float: left;
  width: 200px;
  margin-right: 10px;
  background: blue;
  height: 400px;
  position: relative;
  min-height: 1px;
  padding-left: 2.5px;
  padding-right: 2.5px;
  display: block;
}

div:nth-child(2n + 1) {
  background: yellow;
}

div:nth-child(3n + 1) {
  background: green;
}

JavaScript

var last = document.querySelector('article');
document.addEventListener('scroll', function() {
  last.style["display"] = "inline-block";
  var bottom = last.getBoundingClientRect().bottom;
  last.style = "";
  if (bottom <= window.innerHeight) {
    var ne = last.cloneNode(true);
    last.parentNode.appendChild(ne);
    last = ne;
  }
})