Support react-window library

[Media-Evil]

this does not work

import { OverlayScrollbarsComponent } from 'overlayscrollbars-react'
import  { FixedSizeList } from 'react-window'

//oversimplified!
<OverlayScrollbarsComponent>
  <FixedSizeList>
    //content
  </FixedSizeList>
</OverlayScrollbarsComponent>

[KingSora]

Good day!

I'm aware of a bug which prevents the usage of structural directives like v-for in Vue. I've also tested this with React and could confirm the same bug here. It's possible this bug is also prevent your solution from working. Luckily I've already fixed this bug and made some general improvements to the component wrappers.

This update (v1.10.0) should come very soon (maybe today in fact). In the meantime you could try to create a simple example on StackBlitz or CodeSandbox in case the new release won't fix your problem.

[KingSora]

@Media-Evil The new version is now here. Please test it!

[Media-Evil]

Tested with lists. Native scrollbars still persist if component is passed as a child to <OverlayScrollbarsComponent>. There are no problems with html tagnames though.

Do component wrappers now support textareas?

[KingSora]

@Media-Evil no they arent yet!

Could you create a example on one of the pages mentioned above, so I could take a look and identify the issue, else I cant really help you out.

[Media-Evil]

https://stackblitz.com/edit/react-rqbfe8

[KingSora]

Thanks!

Thats no bug, since react-window is a library which already provides its own viewport and therefore scrollcontainer. But theres a possibility to support it, but I'm not quite sure how to implement it yet.

[joa-queen]

I managed to make it work with react-window. You can set an outerElementType and pass the scroll event to the corresponding element. This is how:

const Overflow = ({ children, onScroll }) => {
  const ofRef = useRef(null);

  useEffect(() => {
    const el = ofRef.current.osInstance().getElements().viewport;

    if (onScroll) el.addEventListener('scroll', onScroll);

    return () => {
      if (onScroll) el.removeEventListener('scroll', onScroll);
    };
  }, [onScroll]);

  return (
    <OverlayScrollbarsComponent
      options={options}
      ref={ofRef}
    >
      {children}
    </OverlayScrollbarsComponent>
  );
};

And then, in your virtualized component:

<FixedSizeGrid
  {...props}
   outerElementType={Overflow}
>

I'm using this with FixedSizeGrid but it should work the same for lists.

Hope it helps.

[ndanzi]

Is there the possibility to make it work also with react-virtualized? here is a sandbox with a non working example: https://codesandbox.io/s/peaceful-swirles-c61w0?file=/src/App.js

[partha-0103]

I managed to make it work with react-window. You can set an outerElementType and pass the scroll event to the corresponding element. This is how:

const Overflow = ({ children, onScroll }) => {
  const ofRef = useRef(null);

  useEffect(() => {
    const el = ofRef.current.osInstance().getElements().viewport;

    if (onScroll) el.addEventListener('scroll', onScroll);

    return () => {
      if (onScroll) el.removeEventListener('scroll', onScroll);
    };
  }, [onScroll]);

  return (
    <OverlayScrollbarsComponent
      options={options}
      ref={ofRef}
    >
      {children}
    </OverlayScrollbarsComponent>
  );
};

And then, in your virtualized component:

<FixedSizeGrid
  {...props}
   outerElementType={Overflow}
>

I'm using this with FixedSizeGrid but it should work the same for lists.

Hope it helps.

is this working?

[partha-0103]

@joa-queen please check this sandbox

[nfmshow]

@partha-0103 wrap the scrollbar children with a div with fixed height.

<OverlayScrollbarsComponent options={options} ref={ofRef}>
   <div style={{ maxHeight: "100px" }}>
      {children}
   </div>
</OverlayScrollbarsComponent>

[KingSora]

It took a bit of time, but with v2 OverlayScrollbars should work with all virtual scroll libraries. I've created a small example for FixedSizeList here: https://stackblitz.com/edit/react-8glpkm?file=index.js and also an example with horizontal layout: https://stackblitz.com/edit/react-wdbggw?file=index.js

You can use this approach also for VariableSizeList, FixedSizeGrid and FixedSizeGrid.

[comerc]

@KingSora please add example for VariableSizeList.outerElementType with useOverlayScrollbars. It is working code without useOverlayScrollbars:

const outerElementType = React.forwardRef(({ children, onScroll, style }, ref) => {
  return <div {...{ ref, style, onScroll }}>{children}</div>
})

other example: https://codesandbox.io/s/bvaughnreact-window-fixed-size-list-vertical-wqmeo?file=/index.js:323-339

[codingedgar]

It took a bit of time, but with v2 OverlayScrollbars should work with all virtual scroll libraries. I've created a small example for FixedSizeList here: https://stackblitz.com/edit/react-8glpkm?file=index.js and also an example with horizontal layout: https://stackblitz.com/edit/react-wdbggw?file=index.js

You can use this approach also for VariableSizeList, FixedSizeGrid and FixedSizeGrid.

Hello, thank you for the library, and sorry for the silly question but, how could I remove the flicker at the start? tried to add data-overlay scrollbars-initialize in https://stackblitz.com/edit/react-8glpkm?file=index.js but there are still a few frames where the initial scrollbar is visible

[Rychu-Pawel]

It took a bit of time, but with v2 OverlayScrollbars should work with all virtual scroll libraries. I've created a small example for FixedSizeList here: https://stackblitz.com/edit/react-8glpkm?file=index.js and also an example with horizontal layout: https://stackblitz.com/edit/react-wdbggw?file=index.js

You can use this approach also for VariableSizeList, FixedSizeGrid and FixedSizeGrid.

@KingSora v2.4.7 is the last one that works correctly with this example. From v2.5.0 it breaks. Could you please update your example for the newest version?

[KingSora]

@Rychu-Pawel I'm looking into it!

[KingSora]

@Rychu-Pawel Alright, sorry for the trouble... The problem was that remaining IE11 compatibility code was overwriting the height style set by the react-window library. I've now properly removed the remaining code and published a new version v2.6.1 which should work again without problems: https://stackblitz.com/edit/react-2heqyv?file=index.js

[Rychu-Pawel]

@KingSora, wow, that was blazing fast 💪 I can confirm the newest version is working as expected. Thank you so much for your quick fix! Best package maintenance ever 🎉