Virtualised Lists

const ROW_H = 40, BUFFER = 5;
const $container = $("#list-wrap");
const $inner = $("#list-inner");
const $viewport = $("#list-viewport");
function render() {
  const scrollTop = $viewport.scrollTop();
  const start = Math.max(0, Math.floor(scrollTop / ROW_H) - BUFFER);
  const end   = Math.min(data.length, Math.ceil((scrollTop + $viewport.height()) / ROW_H) + BUFFER);
  $inner.css("paddingTop", start * ROW_H);
  $container.html(data.slice(start, end).map((d, i) =>
    `<div class="row" style="height:${ROW_H}px">${d.name}</div>`).join(""));
}
$viewport.on("scroll", $.throttle(50, render));
$inner.css("height", data.length * ROW_H); render();