How to add private scrollbar in list?

[NickJiangDev]

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Describe the solution you'd like
A clear and concise description of what you want to happen.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

[inokawa]

Hi, what does private scrollbar mean?

[NickJiangDev]

Hi, what does private scrollbar mean?

Hi, when I use VList, I would like to style the scrollbar. However, instead of overriding it with CSS styles, I would like to provide a React component or class to wrap the scroll area. I found that I can only access it through "ref". Is there a way to achieve a similar effect as shown in the image below?

[inokawa]

If you want to customize component, you can use components.Root prop to override default root component.

The default root component is here. Copy paste it and customize by yourself.

virtua/src/react/Viewport.tsx

Lines 41 to 61 in 609141d

	export const Viewport = forwardRef<any, CustomViewportComponentProps>(
	({ children, attrs, width, height, scrolling }, ref): ReactElement => {
	return (
	<div ref={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>
	</div>
	);
	}
	);

And here is an example overriding root component with ul.

virtua/stories/basics/VList.stories.tsx

Lines 571 to 578 in 609141d

	<VList
	style={{
	flex: 1,
	background: "#fff",
	}}
	components={{ Root: UlList, Item: Li }}
	overscan={20}
	>

https://inokawa.github.io/virtua/?path=/story/basics-vlist--ul

[NickJiangDev]

If you want to customize component, you can use components.Root prop to override default root component.

The default root component is here. Copy paste it and customize by yourself.

virtua/src/react/Viewport.tsx

Lines 41 to 61 in 609141d

	export const Viewport = forwardRef<any, CustomViewportComponentProps>(
	({ children, attrs, width, height, scrolling }, ref): ReactElement => {
	return (
	<div ref={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>
	</div>
	);
	}
	);

And here is an example overriding root component with ul.

virtua/stories/basics/VList.stories.tsx

Lines 571 to 578 in 609141d

	<VList
	style={{
	flex: 1,
	background: "#fff",
	}}
	components={{ Root: UlList, Item: Li }}
	overscan={20}
	>

https://inokawa.github.io/virtua/?path=/story/basics-vlist--ul

Thanks a lot, it works on me.