Scroll Area

Scroll areas constrain overflowing content into a fixed region without losing access to the rest of the interface.

Basic Usage

Use a standard scroll area when the content is modest in size but still needs a bounded viewport.

Long Lists

Use a taller scroll area for longer lists that need to stay bounded inside the surrounding interface.

Horizontal Scrolling

Horizontal orientation is useful for card rails, chips, or wide utility panels that should not wrap.

API

Slots

Name	Description
(default)	Scrollable content

Props

Name	Description
content	Readonly reference to the internal scroll container. Type HTMLDivElement
orientation	Type PkScrollAreaOrientation Default vertical
size	Type PkScrollAreaSize Default default
withoutScrollbar	Type boolean Default false
withoutShadow	Type boolean Default false

Events

Name	Description
@pk-scroll	Emitted when the viewport scrolls.

CSS Parts

Name	Description	CSS selector
base	Root container	::part(base)
content	Scrollable content wrapper	::part(content)
end-shadow	Trailing edge shadow	::part(end-shadow)
scrollbar	Custom scrollbar track	::part(scrollbar)
start-shadow	Leading edge shadow	::part(start-shadow)
thumb	Custom scrollbar thumb	::part(thumb)
viewport	Scroll viewport (alias for content)	::part(viewport)