How to use with custom scrollbar library (e.g. simplebar, OverlayScrollbars, etc)?

[taviks]

In my app "virtual" was working perfectly... spent a good long while working out small issues. It's implemented using vanilla JS (well, Imba, actually).

I'm wanting overlay scrollbars. Attempting to implement https://github.com/Grsmto/simplebar now but am having issues getting it to work with "virtual". Am also considering https://github.com/KingSora/OverlayScrollbars.

Any insight on getting "virtual" to work with one of these?

[taviks]

Related:

• Failed to work with TanStack/virtual KingSora/OverlayScrollbars#499
• Missing support for virtual lists Grsmto/simplebar#546

[piecyk]

@jaymakes11 one option could be https://codesandbox.io/s/pensive-bartik-x2ko08?file=/src/index.js that is real power of virtual as you are in control of markup.

[taviks]

This was much easier than I anticipated.

The trick seems to be updating the getScrollElement callback from this:

getScrollElement: do() document.getElementById('my-scroll-container-id')

to this:

getScrollElement: do() simpleBar.getScrollElement()

[xmsz-stu]

when i use SimpleBar, the scroll seems to be stuck

  const parentRef = useRef<React.ComponentRef<typeof SimpleBar>>(null);

  const rowVirtualizer = useVirtualizer({
    count: listState.list?.length || 0,
    getScrollElement: () => parentRef.current?.getScrollElement() || null,
    estimateSize: () => 58,
    overscan: 5,
  });

When i use normal div, it don't have the stuck.

[DmitriyWebDev]

I had the same problem today but with overlayscrollbars-vue

I just increased the overscan parameter to 25 and the problem was solved.