Infinite Scroll

by Génesis García Morilla

HTML

<ol>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ol>

CSS

* {
    color: #2b2b2b;
    font-family: "Roboto Condensed";
}

ol {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: auto;
}

li {
  background-color: #50514F;
  height: 100px;
  line-height: 90px;
  box-shadow: 0px 5px 10px rgba(136, 136, 136, 0.25);
  margin-bottom: 10px;
}

li:nth-child(2n) {
  background-color: #F25F5C;
}

li:nth-child(3n) {
  background-color: #FFE066;
}

li:nth-child(4n) {
  background-color: #247BA0;
}

li:nth-child(5n) {
  background-color: #70C1B3;
}

JavaScript

var $ol = document.querySelector("ol");

function load_more() {
  var html = "";
  
  for (var i = 0; i < 5; i++) html += '<li></li>';
  $ol.innerHTML += html;
}

$ol.addEventListener("scroll", function() {	
  if ($ol.scrollHeight - $ol.scrollTop === $ol.clientHeight) 
    load_more();
});