JSFiddle - React, Tailwind, and code Playground

by valkyris

HTML

<script src="https://polyfill.io/v2/polyfill.min.js?features=IntersectionObserver"></script>
<input id="input1" placeholder="# of items in DB"/>
<input id="input2" placeholder="# of DOM els (min 20)"/>

<button id="start-btn" onclick="start()">
  Start Infinite Scroll
</button>

<div id="container">
  <ul class="cat-list" stle="top-padding: 0px; bottom-padding: 0px">
  </ul>
</div>

CSS

.cat-list {
  overflow: scroll;
  list-style-type: none;
  padding: 0;
}

.cat-tile {
  background-color: grey;
  margin: 10px 0;
  height: 150px;
  width: 100%;
}

JavaScript

const _getCatImg = () => {
  const randomNum = () => {
    return Math.floor(Math.random() * 100000);
  };
  const url = "https://source.unsplash.com/collection/139386/100x100/?sig=";
  return url + randomNum();
};

let topSentinelPreviousY = 0;
let topSentinelPreviousRatio = 0;
let bottomSentinelPreviousY = 0;
let bottomSentinelPreviousRatio = 0;

let listSize = 20;
let DBSize = 200;

const initDB = num => {
	const db = [];
  for (let i = 0; i < num; i++) {
  	db.push({
    	catCounter: i,
      title: `cat image number ${i}`,
      imgSrc: _getCatImg()
    })
  }
  return db;
}

let DB = [];

let currentIndex = 0;

const initList = num => {
	const container = document.querySelector(".cat-list");
  
  for (let i = 0; i < num; i++) {
  	const tile = document.createElement("LI");
    tile.setAttribute("class", "cat-tile");
    tile.setAttribute("id", "cat-tile-" + i);
    const title = document.createElement("H3");
    const t = document.createTextNode(DB[i].title);
    title.appendChild(t);
    tile.appendChild(title);
    const img = document.createElement("IMG");
    img.setAttribute("src", DB[i].imgSrc);
    tile.appendChild(img);
  	container.appendChild(tile);
  }
  
}

const getSlidingWindow = isScrollDown => {
	const increment = listSize / 2;
	let firstIndex;
  
  if (isScrollDown) {
  	firstIndex = currentIndex + increment;
  } else {
    firstIndex = currentIndex - increment;
  }
  
  if (firstIndex < 0) {
  	firstIndex = 0;
  }
  
  return firstIndex;
}

const recycleDOM = firstIndex => {
	for (let i = 0; i < listSize; i++) {
  	const tile = document.querySelector("#cat-tile-" + i);
    tile.firstElementChild.innerText = DB[i + firstIndex].title;
    tile.lastChild.setAttribute("src", DB[i + firstIndex].imgSrc);
  }
}

const getNumFromStyle = numStr => Number(numStr.substring(0, numStr.length - 2));

const adjustPaddings = isScrollDown => {
	const container = document.querySelector(".cat-list");
  const currentPaddingTop =...