T
TanStack•2y ago
robust-apricot

Jumping scrolling and flickering with @tanstack/react-virtual

Hi there, I'm trying to implement the @tanstack/react-virtual library on a page with a scroll list of approx 90 items. I have been able to return the virtualItems but I find that when I scroll down in larger strokes / somewhat quickly I'm getting the scrollbar jumping and the page flickering. This is in a Next JS 14.0.3 pages router project. Is there anything that jumps out in the code below as obviously wrong? Here is my component (uploaded file).

useVirtualizer

2 Replies
solid-orange
solid-orange•2y ago
@henryb seems like you're missing the start offset? 
              key={virtualItem.key}
              style={{
                position: 'absolute',
                top: 0,
                left: 0,
                width: '100%',
                height: `${virtualItem.size}px`,
                transform: `translateY(${virtualItem.start}px)`,
              }}
              key={virtualItem.key}
              style={{
                position: 'absolute',
                top: 0,
                left: 0,
                width: '100%',
                height: `${virtualItem.size}px`,
                transform: `translateY(${virtualItem.start}px)`,
              }}
Your items should look something like this: https://tanstack.com/virtual/v3/docs/guide/introduction
Introduction | TanStack Table Docs
TanStack Virtual is a headless UI utility for virtualizing long lists of elements in JS/TS, React, Vue, Svelte and Solid. It is not a component therefore does not ship with or render any markup or styles for you. While this requires a bit of markup and styles from you, you will retain 100% control over your styles, design and implementation. T...
robust-apricot
robust-apricotOP•2y ago
Thank you @NiklasPor that's fixed the issue I had caused! 🙏

Did you find this page helpful?