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:
}}
>
Some Dynamic content
</Box>
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>
