Scroll

A native scroll container with vertical, horizontal or two-axis scrolling.

ScrollProps packages/core/src/components/scroll.ts:18 ↗

Scroll rendered by Tarve — Native render. The live version loads when this comes into view.

Import

import { Scroll } from "@tarve/core";

Usage

Scroll.tsx

import { Scroll, Text } from "@tarve/core";

<Scroll
  gap={8}
  padding={12}
  style={{ height: 240 }}
  onScroll={(offset) => console.log("scrolled to", offset)}
>
  {Array.from({ length: 50 }, (_, index) => (
    <Text key={index}>Row {index + 1}</Text>
  ))}
</Scroll>

Props

Prop	Type	Default
`followTail` Stick to the end: while the area is at its end (or new), growing content keeps it there (a chat, a log). Scrolling away stops it; scrolling back to the end resumes it.	`boolean`	—
`onScroll`	`(offset: number, max: number, info: ScrollInfo) => void`	—
`onScrollPosition`	`(position: ScrollPosition) => void`	—
`orientation`	`ScrollOrientation`	`"vertical"`
`speed`	`number`	`1`

Inherited from ViewProps 14 props

Prop	Type	Default
`align`	`Style["align"]`	—
`autoFocus` Focus this control when it first appears (HTML `autofocus`); interactive views only (Pressable).	`boolean`	—
`children`	`BindableChild`	—
`dismissOnOutside` A press outside the box fires `onOutsideClick` instead of reaching what is under it (light dismiss). Works on portals and in-flow boxes; an open portal wins.	`boolean`	—
`dragRegion`	`boolean`	—
`flex` CSS `flex`: `1` is `1 1 0`; strings take any CSS value, e.g. `"1 1 176px"`.	`number \| string`	—
`focusable`	`boolean`	—
`gap`	`number`	—
`justify`	`Style["justify"]`	—
`onOutsideClick` With `dismissOnOutside`: a press (or right click) outside the box.	`() => void`	—
`padding`	`Style["padding"]`	—
`portal`	`boolean`	—
`style` Values may be signals: setting one restyles this box without a render.	`Reactive<Style>`	—
`windowAction`	`"minimize" \| "toggleMaximize" \| "toggleFullscreen" \| "close"`	—

Common props

Shared by every component. See descriptions →

classclassNamedropTargetfileDropTargethighlightidkeymotionFromonDragEnteronDragLeaveonDroponFileDragEnteronFileDragLeaveonFileDroponHighlightonPasteonPointerLeaveonPointerMoveonSizeonTransitionEndrovingGroup

Types

BindableChild

type BindableChild = Child | Signal<unknown> | BindableChild[];

Reactive

type Reactive<S> = { [K in keyof S]: S[K] | Signal<Exclude<S[K], undefined>> };

ScrollInfo

interface ScrollInfo { source: ScrollSource }

ScrollOrientation

type ScrollOrientation = "vertical" | "horizontal" | "both";

ScrollPosition

interface ScrollPosition { x: number; y: number; maxX: number; maxY: number; source: ScrollSource }