General
Scrollbar
Proportional scrollbar indicator showing content visibility and scroll position, with optional Swiper integration.
Overview
Split into Atom (rendering) and Molecule (Swiper integration) components for reusability. Bar width calculated proportionally based on visible items versus total items. Uses CSS transforms for smooth, performant position updates. Emits onChange event for external scroll control.
Key Business & UX Benefits
- Shows how much content is visible and how far the user has scrolled.
- Gives a clear, familiar control for horizontal and vertical sliders.
- Keeps interaction smooth with CSS-based updates.
- Integrates with Swiper so scroll position stays in sync.
Pro-Tip from Larry: Use the scrollbar with Swiper so users see scroll progress and can drag to scroll.
Usage
Horizontal
Scrollbar Horizontal
<LuiScrollbar />
Vertical
Scrollbar Vertical
<LuiScrollbar />
Feature List
- Horizontal and vertical orientations with light and dark color modes
- Dynamic progress indicator proportional to visible content
- Swiper integration via dedicated SwiperScrollbar molecule component
- Accessible 24px minimum clickable touch target area
API Reference
| Prop | Default | Type |
|---|---|---|
thumbSizerequired | number | |
thumbPositionrequired | number | |
orientation | horizontal | "horizontal" | "vertical" |
colorMode | default | "default" | "on-light" | "on-dark" | "on-bright" |
forId | stringId of the element that the scrollbar is for. | |
onTrack-click | (event: MouseEvent): any | |
onDrag-start | (event: MouseEvent): any |
| Event | Type |
|---|---|
track-click | (event: "track-click", event: MouseEvent): void |
drag-start | (event: "drag-start", event: MouseEvent): void |