가상 리스트

<div class="vlw">
  <div class="vlmeta">렌더된 행: <b id="vlcount">0</b> / 10,000</div>
  <div class="vlvp" id="vlvp">
    <div class="vlsp" id="vlsp"><div class="vlrows" id="vlrows"></div></div>
  </div>
</div>

.vlw{position:absolute;inset:12px;display:flex;flex-direction:column;gap:5px}
.vlmeta{flex:none;font-size:10px;color:var(--muted)}
.vlmeta b{color:var(--accent);font-variant-numeric:tabular-nums}
.vlvp{flex:1;min-height:0;overflow-y:auto;border:1px solid var(--line);border-radius:8px;background:var(--surface)}
.vlsp{position:relative}
.vlrows{position:absolute;left:0;right:0;top:0}
.vlrow{height:24px;display:flex;align-items:center;padding:0 9px;border-bottom:1px solid var(--line);font-size:10px;color:var(--fg)}
.vlrow:nth-child(even){background:color-mix(in srgb, var(--line) 35%, transparent)}

const ROWH = 24, COUNT = 10000, BUFFER = 3;
const vp = document.getElementById('vlvp'), sp = document.getElementById('vlsp'), rows = document.getElementById('vlrows'), countEl = document.getElementById('vlcount');
sp.style.height = (COUNT * ROWH) + 'px';
function render() {
  const top = vp.scrollTop, viewH = vp.clientHeight || 140;
  const start = Math.max(0, Math.floor(top / ROWH) - BUFFER);
  const end = Math.min(COUNT, Math.ceil((top + viewH) / ROWH) + BUFFER);
  rows.style.transform = 'translateY(' + (start * ROWH) + 'px)';
  let html = '';
  for (let i = start; i < end; i++) html += '<div class="vlrow">#' + (i + 1) + ' — row item</div>';
  rows.innerHTML = html;
  countEl.textContent = String(end - start);
}
vp.addEventListener('scroll', render);
render();
let dir = 1;
setInterval(() => {
  const max = sp.clientHeight - vp.clientHeight;
  vp.scrollTop = Math.max(0, Math.min(max, vp.scrollTop + dir * 260));
  if (vp.scrollTop <= 0 || vp.scrollTop >= max) dir *= -1;
}, 500);