virtualizer.getVirtualItems() return zero items for vanilla js project
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
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- 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