JSFiddle - React, Tailwind, and code Playground

HTML

<div id="scroll-container">
  <div id="scroll-root">
    
  </div>
</div>

CSS

#scroll-container {
  height: 500px;
  background-color: lightblue;
  overflow-y: auto;
  will-change: transform;
}

#scroll-root {
  background-color: lightgreen;
}

.row {
  white-space: nowrap;
}

.cell {
  display: inline-block;
  border: 1px solid black;
  width: 70px;
}

JavaScript

let numRows = 1000;
let numCols = 100;

let scrollRoot = document.getElementById('scroll-root');
for(let rowId = 0; rowId < numRows; rowId++) {
  let row = document.createElement('div');
  row.className = 'row';
  for(let colId = 0; colId < numCols; colId++) {
  	let cell = document.createElement('div');
    cell.className = 'cell';
    cell.textContent = `cell${rowId}x${colId}`;
    row.appendChild(cell);
  }
  scrollRoot.appendChild(row);
}