ScrollArea

<ts-scroll-area> vv0.6.3

The ts-scroll-area component.

Open in Storybook for interactive demos.

Preview

<ts-scroll-area orientation="vertical">Content</ts-scroll-area>

Properties

Property	Attribute	Type	Default	Description
maxHeight	max-height	string | undefined	—	Optional max height for the scroll area (e.g. ‘300px’).
orientation	orientation	"both" | "horizontal" | "vertical"	'vertical'	The scroll orientation.

Slots

Name	Description
*(default)*	Default slot for scrollable content.

CSS Parts

Use ::part() to style internal elements:

Part	Description
viewport	The scrollable viewport container.

ts-scroll-area::part(viewport) {
  /* your custom styles */
}

Usage

HTML

<ts-scroll-area orientation="vertical">Content</ts-scroll-area>

React

import { TsScrollArea } from '@tessera-ui/react';

<TsScrollArea orientation="vertical">Content</TsScrollArea>