surma/infscroll.html

## infscroll.html
<!doctype html>
<style>
html, body {
  margin: 0;
  background-color: #CCC;
  box-sizing: border-box;
}
.item {
  margin: 20px;
  padding: 20px;
  background-color: #FFF;
  border: 1px solid #666;
}
.item p {
  width: 100%;
  background-color: #666;
  height: 10px;
}
#template {
  display: none;
}
#sentinel {
  width: 1px;
  height: 1px;
}
</style>
<div id="template" class="item">
  <p></p>
  <p></p>
  <p></p>
</div>
<div id="sentinel"></div>
<script>
  var template = document.getElementById('template');
  var sentinel = document.getElementById('sentinel');

  function loadItems(n) {
    for(var i = 0; i < n; i++) {
      var newItem = template.cloneNode(true);
      newItem.id = '';
      document.body.appendChild(newItem);
    }
  }

  var io = new IntersectionObserver(_ => {
    sentinel.parentNode.removeChild(sentinel);
    requestAnimationFrame(_ => {
      loadItems(10);
      document.body.appendChild(sentinel);
      loadItems(1);
    });
  });
  io.observe(sentinel);
</script>
	<!doctype html>
	<style>
	html, body {
	margin: 0;
	background-color: #CCC;
	box-sizing: border-box;
	}
	.item {
	margin: 20px;
	padding: 20px;
	background-color: #FFF;
	border: 1px solid #666;
	}
	.item p {
	width: 100%;
	background-color: #666;
	height: 10px;
	}
	#template {
	display: none;
	}
	#sentinel {
	width: 1px;
	height: 1px;
	}
	</style>
	<div id="template" class="item">
	<p></p>
	<p></p>
	<p></p>
	</div>
	<div id="sentinel"></div>
	<script>
	var template = document.getElementById('template');
	var sentinel = document.getElementById('sentinel');

	function loadItems(n) {
	for(var i = 0; i < n; i++) {
	var newItem = template.cloneNode(true);
	newItem.id = '';
	document.body.appendChild(newItem);
	}
	}

	var io = new IntersectionObserver(_ => {
	sentinel.parentNode.removeChild(sentinel);
	requestAnimationFrame(_ => {
	loadItems(10);
	document.body.appendChild(sentinel);
	loadItems(1);
	});
	});
	io.observe(sentinel);
	</script>