Scroller Coaster

A customizable, flexible, and elegant scrollbar component for React.js and Next.js.

Live Demo

Features

- 🎯 Support for both vertical and horizontal scrolling
- 🌐 RTL layout support
- 🎨 Fully customizable styling
- 🔄 Smooth scrolling experience
- ⚡ High performance, no jank
- 📱 Responsive design

Installation

``bash
npm install scroller-coaster
`

Basic Usage

`tsx
import { ScrollerCoaster } from 'scroller-coaster';

const App = () => {
return (
style={{
width: '400px',
height: '300px',
border: '1px solid #ccc'
}}
>
{/ Your content /}

);
};
`

API

$3

| Property | Type | Default | Description |
|----------|------|---------|-------------|
| draggingScrollMaximumSpeed | number | 15 | Maximum speed of scroll when dragging (px/frame) |
| draggingScrollThreshold | number | 50 | Threshold to trigger drag scrolling (px) |
| horizontalTrackProps | ScrollerCoasterTrackProps | - | Horizontal scrollbar track properties |
| verticalTrackProps | ScrollerCoasterTrackProps | - | Vertical scrollbar track properties |
| dir | 'rtl' \| 'ltr' | 'ltr' | Text direction |

$3

| Property | Type | Default | Description |
|----------|------|---------|-------------|
| showMode | 'always' \| 'hover' \| 'scrolling' | 'scrolling' | Scrollbar visibility mode |
| size | number | 12 | Scrollbar size (px) |
| thumbProps | React.HTMLAttributes | - | Scrollbar thumb properties |

Examples

$3

`tsx
horizontalTrackProps={{
showMode: 'always',
size: 8,
thumbProps: {
style: {
backgroundColor: '#6366f1',
borderRadius: '4px'
}
}
}}
verticalTrackProps={{
showMode: 'hover',
size: 8,
thumbProps: {
style: {
backgroundColor: '#6366f1',
borderRadius: '4px'
}
}
}}
>
{/ Content /}

`

$3

`tsx
dir="rtl"
style={{
width: '400px',
height: '300px'
}}
>
{/ RTL content /}

`

Browser Support

- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)

Development

`bash


Install dependencies

npm install

Run development environment

npm run demo

Build library

npm run build:lib

Build demo

npm run build:demo
`

License

MIT

Contributing

1. Fork the project
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'feat: add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature`)
5. Open a Pull Request