ナビ・リスト操作
仮想スクロール
1万件のリストでも、見えている範囲の行だけをDOMに描画する仮想スクロール。スクロールに応じて表示スライスを差し替え、総量ぶんの高さはスペーサーで確保する。
プレビュー
スクロール
操作枠内をスクロールすると動きます。
実装メモ
1万件を全部DOM化すると重いので、可視範囲＋前後の余白(overscan)ぶんの行だけを描画します。スクロール総量は spacer の高さ(件数×行高)で確保し、描画スライスを translateY で正しい位置へずらします。scroll イベントは requestAnimationFrame で間引き、描画範囲が変わったときだけ差し替えます。行高(ROW_H)を可変にする場合は各行の実測位置を積算する必要があります。
コード（コピーして使えます）
<div class="vs-root">
<div class="vs-header">
<span class="vs-title">ログ</span>
<span class="vs-count" id="vs-count">全 10,000 行</span>
</div>
<div class="vs-viewport" id="vs-viewport" tabindex="0" aria-label="仮想スクロールリスト">
<div class="vs-spacer" id="vs-spacer">
<div class="vs-slice" id="vs-slice"></div>
</div>
</div>
</div>