Loading...
Installation
Usage
import ScrollPagination from "@/components/ruixen/scroll-pagination";
export default function App() {
const handlePageChange = (page: number) => {
console.log(`Current page: ${page + 1}`);
};
return <ScrollPagination totalPages={20} onChange={handlePageChange} />;
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
totalPages | number | 20 | Total number of pages |
onChange | function | - | Callback when page changes |
className | string | "" | Additional CSS classes |
Features
- Scroll Navigation: Use mouse wheel to navigate pages
- Throttled Scrolling: Prevents rapid page changes (150ms throttle)
- Number Carousel: Animated vertical carousel for page numbers
- Minimalist Design: Clean layout with just arrows and current page
- Spring Animations: Smooth transitions with spring physics
Interactions
- Mouse Wheel Up: Go to previous page
- Mouse Wheel Down: Go to next page
- Arrow Buttons: Navigate one page at a time
- Throttling: Only one page change per 150ms to prevent rapid scrolling