Ability to add custom scrollbar for VList

[adventofryz]

I am trying to use React simplebar with virtua but am not sure how to use this.

https://github.com/Grsmto/simplebar/tree/master/packages/simplebar-react

Typically we do something like this for third party virtualization libraries like react window:

<SimpleBar> {({ scrollableNodeRef, contentNodeRef }) => { return <div> Access to scrollable and content nodes </div>; }} </SimpleBar>

How do I use this with virtua?

I looked into the components for VList and thought of using component Root to pass the scrollbar through it but it doesn't work.

https://github.com/inokawa/virtua/blob/main/docs/interfaces/react.VListProps.md#components

[inokawa]

This looks working:

import SimpleBar from "simplebar-react";
import "simplebar-react/dist/simplebar.min.css";

const Root = forwardRef<HTMLDivElement, CustomViewportComponentProps>(
  ({ children, attrs, width, height, scrolling }, ref): ReactElement => {
    return (
      <SimpleBar scrollableNodeProps={{ref}} {...attrs}>
        <div
          style={useMemo((): CSSProperties => {
            return {
              position: "relative",
              visibility: "hidden",
              width: width ?? "100%",
              height: height ?? "100%",
              pointerEvents: scrolling ? "none" : "auto",
            };
          }, [width, height, scrolling])}
        >
          {children}
        </div>
      </SimpleBar>
    );
  }
);

const Comp = () => {
  return (
    <VList style={{ height: "100vh" }} components={{ Root }}>
      {createRows(1000)}
    </VList>
  );
}

[adventofryz]

This makes sense. I didn't realize I had to set the CSS properties of the div inside. Thank you!

[EjovA]

Hello i'm trying to stylize scrollBar with inline styles, but it doesn't seem to work, not even the hover selector. Please let me know if I'm doing something wrong.
<VList
reverse
shift
style={{
'&::-webkit-scrollbar': { width: '0.5em' },
'&::-webkit-scrollbar-thumb': { backgroundColor: 'rgba(0,0,0,1)', borderRadius: '10px' },
'&:hover': {
opacity: 0
},
height: "calc(100% - 40px)",
}}
ref={listRef}
>
{rows.reverse().map((frame, index) => {
return (
<DataAccordion
frame={frame}
index={index}
length={rows.length}
tabValue={tabValue}
visibleValues={visibleValues}
key={frameAccordion_№${rows.length - index}in_RedisDisplay_№${tabValue + 1}}
repaint={() => { }}
/>
)
})}

    </VList>

[adventofryz]

Generally, it is recommended NOT to use custom scrollbars as it is the web standard to rely on the browsers default scrollbar to ensure a consistent and accessible user experience.

If you still want custom scrollbars, you can use a classname and put your webkit selectors inside that like so:

.custom-scrollbar {
  /* width */
  &::-webkit-scrollbar {
    width: 20px;
  }

  /* Track */
  &::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px grey;
    border-radius: 10px;
  }

  /* Handle */
  &::-webkit-scrollbar-thumb {
    background: red;
    border-radius: 10px;
  }

  /* Handle on hover */
  &::-webkit-scrollbar-thumb:hover {
    background: #b30000;
  }
}

And then use it like this:

<VList
  className="custom-scrollbar"
  style={{
       height: "80vh",
   }}>
  {createRows(1000)}
</VList>

If you don't like css files, the alternative is to use Styled Components and wrap your VList inside of it.

[EjovA]

Look like it works now, i forgot that selectors don't work in inline styles. Thank you. And thank's for advice, but i work not on regular mass user web app, and have to use custom scrollbars to achievie repeatability. You made me smile :)

[xmsz-stu]

The latest version doesn't support "component" anymore. What should I do about it?

[inokawa]

I've found that OverlayScrollbars made examples with virtua.
KingSora/OverlayScrollbars#639 (comment)

And you can make customized scrollable element with Virtualizer component instead of component prop.

[xmsz-stu]

thanks, I will try OverlayScrollbars