virtualized list

by kpulkit29

HTML

<div class="vList">
  
</div>

CSS

.vList {
  height: 100px;
  border: 1px solid black;
  overflow: auto;
  position: relative;
}

.item {
  width: 100%;
  height: 50px;
  border: 1px solid black;
  position: absolute
}

JavaScript

function createElements(start, end) {
  let vList= document.getElementsByClassName("vList")[0];
  vList.innerHTML = "";
  for (let i = start; i < end; i++) {
    let div = document.createElement("div");
    div.style.top = `${i*50}px`;
    div.classList.add("item");
    vList.appendChild(div);
  }

}

document.getElementsByClassName("vList")[0].addEventListener("scroll", function(e) {

  let scrollTop = e.target.scrollTop;
  let windowHeight = 150;
  let start = Math.floor(scrollTop / 50);
  let end = Math.min(10, Math.floor((scrollTop + windowHeight) / 50))
   console.log(start, end);
  start<=end && createElements(start, end)
})
createElements(0, 3)