Scroll Area

Loading...

<flint-scroll-bar>

Custom overlay scrollbar. Place inside flint-scroll-area with slot="scrollbar" for an explicit horizontal or second-axis bar. The parent flint-scroll-area calls setThumb() and setVisible() to keep this element in sync with the viewport's scroll position.

• Tag: <flint-scroll-bar>
• Class: FlintScrollBar

Import

import 'flint-ui'; // auto-registers all
// or
import { FlintScrollBar } from 'flint-ui';

Usage

<flint-scroll-bar></flint-scroll-bar>

Properties

Property	Attribute	Type	Default	Description
orientation	orientation	'vertical' | 'horizontal'	'vertical'	Which axis this scrollbar controls. Reflects to attribute.

Slots

Name	Description
—	none (fully shadow DOM)

CSS Custom Properties

Property	Default
--flint-scrollbar-track-color	transparent
--flint-scrollbar-thumb-radius	9999px
--flint-scrollbar-size	8px
--flint-scrollbar-thumb-color	rgba(0, 0, 0, 0.35
--flint-scrollbar-thumb-hover-color	rgba(0, 0, 0, 0.5

Methods

Method	Description
setThumb(pos: number, size: number)	Push updated thumb geometry from the parent scroll area.
setVisible(visible: boolean)	Show or hide the scrollbar (parent controls visibility).

---

<flint-scroll-area>

• Tag: <flint-scroll-area>
• Class: FlintScrollArea

Import

import 'flint-ui'; // auto-registers all
// or
import { FlintScrollArea } from 'flint-ui';

Usage

<flint-scroll-area></flint-scroll-area>

Properties

Property	Attribute	Type	Default	Description
type	type	'auto' | 'always' | 'scroll' | 'hover'	'hover'	Controls when the scrollbars appear. - 'hover' (default) — on hover, when content overflows - 'auto' — when content overflows - 'always' — always - 'scroll' — briefly while scrolling
dir	dir	'ltr' | 'rtl'	'ltr'	Text direction. 'rtl' flips the vertical bar to the left side.

Slots

Name	Description
(default)	Default slot for content
scrollbar

Methods

Method	Description
scrollTo(optionsOrX?: ScrollToOptions | number, y?: number)
scrollBy(optionsOrX?: ScrollToOptions | number, y?: number)

---