2021-02-09 Infinite Scroll Implementation

https://jsfiddle.net/gengns/n5o82orb/

by Ttt Yyy

HTML

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

CSS

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

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

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

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

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

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

JavaScript

let list = document.querySelector("ol");


// solution 1: use document fragment
function loadMore() {
  const fragment = document.createDocumentFragment();
  for(let i = 0; i < 5; i++) {
    const li = document.createElement('li');
    fragment.appendChild(li);
  }
  list.appendChild(fragment)
}

// solution 2: use string? (used by solution I was looking at)
function loadMore2() {
	let html = '';
  for(let i = 0; i < 5; i++) {
    html += '<li></li>';
  }
  list.innerHTML += html
}

list.addEventListener("scroll", function() {
	if(list.scrollHeight - list.scrollTop === list.clientHeight) {
  	loadMore();
  }
});