TanStack
Virtual

Marko Example: Smooth Scroll
GitHub StackBlitz CodeSandbox

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>Smooth Scroll — @tanstack/marko-virtual</title>
    <style>
      * { box-sizing: border-box; margin: 0; padding: 0; }
      body { font-family: system-ui, sans-serif; padding: 24px; }
      h1 { font-size: 24px; margin-bottom: 8px; }
      p { color: #555; margin-bottom: 16px; }
      code { background: #f3f4f6; padding: 1px 4px; border-radius: 3px; font-size: 13px; }
      .scroll-container { height: 300px; overflow-y: auto; border: 1px solid #e5e7eb; border-radius: 6px; position: relative; }
      .item { display: flex; align-items: center; padding: 0 12px; font-size: 13px; border-bottom: 1px solid #f3f4f6; box-sizing: border-box; }
      .item-even { background: #f9fafb; }
      .item-odd  { background: #ffffff; }
      .controls { display: flex; gap: 8px; padding: 12px; background: white; border-top: 1px solid #e5e7eb; position: sticky; bottom: 0; }
      .controls button { padding: 6px 14px; border: 1px solid #d1d5db; border-radius: 6px; background: white; cursor: pointer; font-size: 13px; }
      .controls button:hover { background: #f9fafb; }
    </style>
  </head>
  <body>
    <h1>Smooth Scroll Virtualisation</h1>
    <p>
      Uses <code>scrollToIndex</code> with <code>behavior: 'smooth'</code> for
      native CSS smooth scrolling to any item.
    </p>

    <div/scrollEl class="scroll-container">
      <virtualizer/v
        count=10000
        estimateSize=() => 35
        getScrollElement=() => scrollEl()
      />
      <div style=`height: ${v.totalSize}px; width: 100%; position: relative`>
        <for|item| of=v.virtualItems>
          <div
            class=item.index % 2 === 0 ? "item item-even" : "item item-odd"
            style=`position: absolute; top: 0; left: 0; width: 100%; height: ${item.size}px; transform: translateY(${item.start}px)`
          >
            Row ${item.index}
          </div>
        </for>
      </div>

      <div class="controls">
        <button onClick=() => v.scrollToIndex(0, { behavior: 'smooth' })>↑ Top</button>
        <button onClick=() => v.scrollToIndex(Math.floor(Math.random() * 10000), { behavior: 'smooth' })>→ Random</button>
        <button onClick=() => v.scrollToIndex(9999, { behavior: 'smooth' })>↓ Bottom</button>
      </div>
    </div>
  </body>
</html>