Infinite Scroll Demo

by Aleksey Karagodnikov

HTML

<link rel="stylesheet" href="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css">
<div class="container">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem cum quisquam sunt nihil sit facilis inventore est, explicabo, in iusto tempora nisi hic eveniet repellat incidunt culpa et ipsum, eaque molestiae ullam esse! Autem vero quas reiciendis,
    sed quia ipsam. Placeat aliquam atque sequi facere ea dolorum nisi culpa unde.</p>
  <div class="gallery">
    <div class="row">
      <div class="col col-xs-4">
        <p><img class="img-fluid" src="https://satyr.io/480x720/1"></p>
      </div>
      <div class="col col-xs-4">
        <p><img class="img-fluid" src="https://satyr.io/480x720/2"></p>
      </div>
      <div class="col col-xs-4">
        <p><img class="img-fluid" src="https://satyr.io/480x720/3"></p>
      </div>
    </div>
    <div class="row">
      <div class="col col-xs-4">
        <p><img class="img-fluid" src="https://satyr.io/480x720/4"></p>
      </div>
      <div class="col col-xs-4">
        <p><img class="img-fluid" src="https://satyr.io/480x720/5"></p>
      </div>
      <div class="col col-xs-4">
        <p><img class="img-fluid" src="https://satyr.io/480x720/6"></p>
      </div>
    </div>
  </div>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad iusto sit culpa voluptas voluptatum repellat illo dolore molestias vel eligendi vitae ab similique provident hic nisi officia quis perferendis quae ducimus, nesciunt doloribus eum nobis. Nulla
    sint quaerat aperiam magni ipsum, suscipit quasi, nesciunt officiis ipsam recusandae quam inventore vitae reiciendis non minima deleniti temporibus quidem, perferendis voluptates esse. Quae voluptatibus quod, doloremque eligendi consequatur laborum
    adipisci in cumque perferendis ea ab ipsum totam doloribus dolore placeat inventore magni minima, alias non temporibus. Sequi fugit explicabo quaerat illo voluptatibus, sint odio, mollitia vitae maxime...

JavaScript

var gallery = document.querySelector('.gallery');
var shouldTrackScroll = true;
var shouldLoadContent = false;
var previousScrollTop = 0;

function getElementOffset(element) {
  var de = document.documentElement;
  var box = element.getBoundingClientRect();
  var top = box.top + window.pageYOffset - de.clientTop;
  var left = box.left + window.pageXOffset - de.clientLeft;
  return {
    top: top,
    left: left
  };
}

function debounce(func, wait, immediate) {
  var timeout;
  return function() {
    var context = this,
      args = arguments;
    var later = function() {
      timeout = null;
      if (!immediate) func.apply(context, args);
    };
    var callNow = immediate && !timeout;
    clearTimeout(timeout);
    timeout = setTimeout(later, wait);
    if (callNow) func.apply(context, args);
  };
};

function scrollChecker () {
	var scrolled = window.pageYOffset || document.documentElement.scrollTop;
  var elementEnd = getElementOffset(gallery).top + gallery.offsetHeight - window.innerHeight;
  if (shouldTrackScroll && scrolled > previousScrollTop) {
    if (scrolled >= elementEnd) {
      shouldTrackScroll = false;
      shouldLoadContent = true;
    }
  }
  previousScrollTop = scrolled;
  return false;
}

function loadContent() {
	if (shouldLoadContent) {
  	gallery.innerHTML += gallery.innerHTML;
    shouldTrackScroll = true;
    shouldLoadContent = false;
  }
  return false;
}

window.onscroll = debounce(scrollChecker, 100);
setInterval(loadContent, 100);