Scrollbar Component

Scrollbar component provides a custom-styled scrollbar container to replace the browser's native scrollbar, supporting both vertical and horizontal scrolling with customizable styles and behavior.

Basic Usage

The most basic usage is to create a scrollable container with a fixed height. When content exceeds the container height, a scrollbar will automatically appear.

Show Code

Permanent Scrollbar

By default, the scrollbar only appears on hover. Setting the permanent attribute to true makes the scrollbar always visible.

Show Code

Horizontal Scrolling

When content width exceeds the container width, a horizontal scrollbar will automatically appear.

Show Code

Scroll Events

The scrollbar component provides vertical and horizontal scroll events to get real-time scroll position.

Vertical Scroll Event

Vertical scroll position: 0px

Horizontal Scroll Event

Horizontal scroll position: 0px

Show Code

Custom Height

You can specify the height of the scroll container through the height attribute.

Height: 200px

Height: 400px

Show Code

Scrollbar Component API

Attributes

Attribute	Description	Type	Accepted Values	Default
height	Container height	number	—	300
permanent	Whether scrollbar is always visible	boolean	—	false

Events

Event Name	Description	Callback Parameters
scroll-y	Vertical scroll event	(element: HTMLElement)
scroll-x	Horizontal scroll event	(element: HTMLElement)
click-track	Scrollbar track click event	(element: HTMLElement)

Slots

Slot Name	Description	Scope Parameters
default	Content of the scroll container	—

Methods

The component exposes the following methods, which can be called through ref:

Method Name	Description	Parameters
scrollTo	Scroll to specified position	(options: ScrollToOptions)
updateScrollbar	Update scrollbar state	—
setScrollbar	Set scrollbar position	(mobile: number, direction: 'top' | 'left' | 'none')

Style Variables

Scrollbar component uses the following style variables, which can be customized through SCSS variables:

Variable Name	Description
$scrollbar-size	Scrollbar size
$scrollbar-bg	Scrollbar background color
$scrollbar-thumb-color	Scrollbar thumb color
$bg-color-default	Default background color