Scroll glitches (virtualization?)

[flexsurfer]

v1.1.8
Sometimes scrolling feel laggy and not smooth, there are empty spaces on top and bottom, data is pretty simple and not huge

scrollexample.mov

its not that visible on the video, but in real life its pretty visible and sometimes even worse

both sides

[flexsurfer]

it's actually really visible on Performance • Massive (400k items / ~8M nodes) in demo, sometimes entire page is blank

[vothanhdat]

I’m continuously improving row render performance (reducing per-row work, memoization, and avoiding unnecessary re-renders).

This viewer uses virtualization, so even with fixed-height rows, brief empty space at the top or bottom can still appear during fast scrolling or when the main thread is busy. That’s an inherent tradeoff of virtualized rendering rather than a data-size issue.

I can mitigate it further by tuning overscan and scroll handling, but it’s difficult to eliminate completely while keeping virtualization enabled.

[flexsurfer]

Thanks for the explanation. One thing that might help users tune this further is exposing overscan controls.

For example, props like overscanRows or overscanPx to render a buffer above and below the viewport. Most virtualized lists rely on this to avoid visible blanks when the main thread is briefly busy.

It could also be useful to update the visible range in requestAnimationFrame instead of directly on scroll, and optionally support adaptive overscan based on scroll velocity.

With these knobs, users could trade a bit more DOM work for much smoother scrolling in real-world cases.

[vothanhdat]

Quick update: v1.1.10 is out.

It adds an overscan prop to tune the render buffer (helps reduce blank gaps/lag during fast scrolling), plus sticky-header stability fixes (React key/originalIndex) to behave better when overscan is enabled.

If you try upgrading, let me know whether overscan={300} or overscan={600} improves the issue on your side.

[flexsurfer]

thanks, even overscan={200} works great, how does it affect performance? i don't think in my tool there will be cases with very big or complex data structures, so i guess it shouldn't affect much

edited: unfortunately it's still very bad on any value of overscan for some cases, entire screen is empty sometimes , or there is something else , because for some reason it worked great for overscan={200} but now its not :(

edited: i don't know if its a known thing, but if chrome console is opened the UI is slow, so it works perfect if console is closed