TanStack / TanStack/virtual

virtualizer.getVirtualItems() return zero items for vanilla js project

Open
#699 12 comments 3 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
7.1k
Forks
466
Avg merge
2d 31m
Merged PRs (30d)
13

Description

Describe the bug

I need to implement virtual list in vanilla js.
I used this approach:

<script type="module" defer>
  import { Virtualizer } from 'https://cdn.jsdelivr.net/npm/@tanstack/virtual-core@3.2.0/+esm';
  // other code...
  // Initialize the virtualizer
  const virtualizer = new Virtualizer({
    debug: true,
    count: 10000, // The number of items in the list
    getScrollElement: () => container,
    estimateSize: () => 50, // The estimated size of each item
    overscan: 5, // How many items to render outside of the viewport
  });
  // other code...
  const items = virtualizer.getVirtualItems();
  // items.length always === 0
</script>

No matter what I do, the array of items is always empty. But virtualizer.measurementsCache.length === 10000.

Your minimal, reproducible example

https://codepen.io/Dugnist/pen/LYveoXQ

Steps to reproduce
<script type="module" defer>
  import { Virtualizer } from 'https://cdn.jsdelivr.net/npm/@tanstack/virtual-core@3.2.0/+esm';
</script>
const virtualizer = new Virtualizer({
    debug: true,
    count: 10000, // The number of items in the list
    getScrollElement: () => container,
    estimateSize: () => 50, // The estimated size of each item
    overscan: 5, // How many items to render outside of the viewport
  });

3

const items = virtualizer.getVirtualItems(); // -> []
Expected behavior

const items = virtualizer.getVirtualItems() should return array with more than zero items

How often does this bug happen?

None

Screenshots or Videos

No response

Platform

codepen

tanstack-virtual version

virtual-core@3.2.0

TypeScript version

vanilla js

Additional context

No response

Terms & Code of Conduct
  • I agree to follow this project's Code of Conduct
  • I understand that if my bug cannot be reliable reproduced in a debuggable environment, it will probably not be fixed and this issue may even be closed.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the linked CodePen and the Virtualizer/getVirtualItems entry point, reproducing the empty result with virtual-core@3.2.0 in vanilla JavaScript. Trace the initialization and viewport inputs shown in the issue, then verify that getVirtualItems() returns the expected non-empty range for the 10,000-item list.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
38/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.