T
TanStack•12mo ago
extended-salmon

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
extended-salmon
extended-salmonOP•12mo 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}
...
rival-black
rival-black•9mo 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?
like-gold
like-gold•9mo ago
I'm not sure that's actually related to TanStack/Virtual though. Before implementing this I experienced this as well.
rival-black
rival-black•9mo ago
what exactly did you implement? While scrolling I also notice CPU spikes

Did you find this page helpful?