Dynamic Virtualizer - when scrolling through touchpad it causes flicker
Hey all, I was wondering if any of you have tried implementing a dynamic virtualizer with smooth scroll. I am rendering a list where the height of the items aren't fixed and calculated during render time. For e.g. list item 1 could be of 200 x 400 px and item 2 could be 200 x 900 px. Finding an appropriate estimateSize seems impossible as list item dimensions vary a lot.
My main issue is scroll flickering. Items blink a lot when scrolling down and up, not sure what could be causing that. My virtualizer looks like this
const virtualizer = useVirtualizer({
count: array.length,
getScrollElement: () => parentRef.current,
estimateSize: () => 300,
}) Here is the item component<Box
data-index={virtualQuestion?.index}
key={virtualQuestion.key}
ref={(node: HTMLDivElement) => {
if (node) {
virtualizer.measureElement?.(node);
}
}}
sx={{
position: "absolute",
top: 0,
left: 0,
width: "100%",
transform:
translateY(${virtualQuestion.start}px),
}}
>
Some Dynamic content
</Box>7 Replies
like-gold•2y ago
Hi, checkout this comment https://github.com/TanStack/virtual/discussions/495#discussioncomment-4886406
GitHub
Allow
smooth scroll with dynamic size · TanStack virtual · Discus...As part of the changes: #469, smooth scrolling has been disabled when elements are dynamically sized. It didn't really work if the element was not in view, but for other elements this restricti...
eastern-cyanOP•2y ago
I have also tried adding custom scrollToFn, like the one in the official smooth scroll demo, but no luck, also in docs there is this comment that says smooth scroll with dynamic won't work. Should I just avoid using that custom scrollToFn?
eastern-cyanOP•2y ago
like-gold•2y ago
also in docs there is this comment that says smooth scroll with dynamic won't workwan't work because when scrolling the items height changes that's why scrolling to index,
I have also tried adding custom scrollToFn, like the one in the official smooth scroll demo, but no luck,hmm did you see this example from comment above? https://codesandbox.io/p/devbox/quizzical-mcclintock-r98ru9 regardless without codesandbox example can't really help
eastern-cyanOP•2y ago
The useSmoothScroll implementation is only used when you manually want to cause a scroll through smoothScrollToIndex function call. In my use case, the user would scroll through either touchpad/mouse scroll, and drag the scroll from the scrollbar. Let me know if I am missing something. Also, I apologize for not creating a code sandbox as it is not possible due to the complexity of the project. Also, each item is a mui Timeline component and has a bunch of nested components which likely is slowing down the performance.
like-gold•2y ago
hmm basic replace default scroll behaviour with smooth?
eastern-cyanOP•2y ago
correct!