sunny-green

Custom scrollbars with tanstack/virtual

i have a scrollarea component from @mantine, which uses custom scrollbars to scroll inner element (likely via syncing scroll positions) this triggers getScrollElement of rowVirtualizer each frame causing big perf drops any solutions on using tanstack virtual with such custom scroll elements? works fine with native scroll event from mouse

4 Replies

sunny-greenOP•10mo ago

  const getScrollElement = useCallback(() => {
    console.log('triggers');
    return bodyScrollRef.current;
  }, []);
  
  const rowVirtualizer = useVirtualizer({
    count: _rows.length,
    estimateSize: () => rowHeight, //estimate row height for accurate scrollbar dragging
    getScrollElement,
    overscan: 5,
  });

  const getScrollElement = useCallback(() => {
    console.log('triggers');
    return bodyScrollRef.current;
  }, []);
  
  const rowVirtualizer = useVirtualizer({
    count: _rows.length,
    estimateSize: () => rowHeight, //estimate row height for accurate scrollbar dragging
    getScrollElement,
    overscan: 5,
  });

         <ScrollArea
              viewportRef={bodyScrollRef}
              onScrollPositionChange={handleScrollSync}
...

         <ScrollArea
              viewportRef={bodyScrollRef}
              onScrollPositionChange={handleScrollSync}
...

extended-salmon•7mo ago

I've also noticed this... custom scrollbars (even just simply styled with css) look extremely choppy. Have you been able to find something that works well?

sunny-green•7mo ago

I'm not sure that's actually related to TanStack/Virtual though. Before implementing this I experienced this as well.

extended-salmon•7mo ago

what exactly did you implement? While scrolling I also notice CPU spikes

Gaming

Programming

Custom scrollbars with tanstack/virtual

Did you find this page helpful?