React Scrollbar Clone

Turns a scrollbar into a normal HTML element.
React wrapper for scrollbar-clone, generated with @lit/react.

Examples

• Page scrollbar
• Multi-panel layout
• Scrollbar position

import { ScrollbarClone } from "react-scrollbar-clone";

<ScrollbarClone
    originSelector=".with-scrollbar-clone"
    disableScroll={false}
    showOriginScrollbar={false}
    style={{ height: "500px" }}
/>;

Props

| Prop | Required | Type | Description | |---|---|---|---| | originSelector | No | string | CSS selector of the element whose scrollbar to clone. Defaults to page (document.scrollingElement) | | showOriginScrollbar | No | boolean | Whether to keep the original scrollbar visible. Default: false | | disableScroll | No | boolean | Disables scroll interaction on the clone. Default: false | | id | No | string | Element id. Auto-generated if omitted |

All props are optional. The simplest usage clones the page scrollbar:

<ScrollbarClone />

Peer dependencies

• react ^18.0.0 || ^19.0.0
• scrollbar-clone >=0.0.4