Lightweight web component that allows scrollbar to have custom margins, positioning, etc. It effectively transforms the scrollbar into a regular HTML element. Built with Lit for reactive properties and composable controllers.

<scrollbar-clone
    origin-selector=".with-scrollbar-clone"
    disable-scroll="false"
    show-origin-scrollbar="false"
    style="height: 500px;"
/>

Examples:

• Page scrollbar → replaced the native page scrollbar
• Multi-panel layout → three independent scrollbar clones
• Scrollbar position → custom position with CSS animation

Try it in → CodeSandbox, scrollbar position example

packages/
├── scrollbar-clone/          # Web component (npm: scrollbar-clone)
├── react-scrollbar-clone/    # React wrapper (npm: react-scrollbar-clone)
└── config/
    ├── eslint/               # Shared ESLint configs
    └── tsconfig/             # Shared TypeScript configs

apps/
└── storybook/                # Storybook dev environment & demos

docs/                         # GitHub Pages demos

• packages/scrollbar-clone/ — core web component built with Lit, depends on lit and ua-parser-js
• packages/react-scrollbar-clone/ — React wrapper using @lit/react
• packages/config/ — internal shared tooling configs (not published)