T
TanStack•9mo ago
xenial-black

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
xenial-black
xenial-blackOP•9mo 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}
...
deep-jade
deep-jade•6mo 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?
metropolitan-bronze
metropolitan-bronze•6mo ago
I'm not sure that's actually related to TanStack/Virtual though. Before implementing this I experienced this as well.
deep-jade
deep-jade•6mo ago
what exactly did you implement? While scrolling I also notice CPU spikes

Did you find this page helpful?