Skip to content

ScrollViewProps

Defined in: ui/src/types.ts:447

Props for ScrollViewNode / <ScrollView>.

The viewport box is sized via the inherited LayoutProps (width / height / flexGrow …). Content overflowing the scroll axis is clipped and pannable. gap / padding apply to the inner content stack.

optional alignSelf?: "stretch" | "auto" | "flex-start" | "center" | "flex-end" | "baseline"

Defined in: ui/src/types.ts:126

LayoutProps.alignSelf


optional background?: BackgroundOptions

Defined in: ui/src/types.ts:462

Background drawn behind the clipped content.


optional bottom?: PositionValue

Defined in: ui/src/types.ts:152

Offset from the containing block’s bottom edge — px or "<n>%" (only applies to position: "absolute").

LayoutProps.bottom


optional consumeInput?: boolean

Defined in: ui/src/types.ts:198

ConsumeInputProps.consumeInput


optional direction?: "horizontal" | "vertical"

Defined in: ui/src/types.ts:449

Scroll/stack axis. Default "vertical".


optional flexBasis?: LayoutValue

Defined in: ui/src/types.ts:125

LayoutProps.flexBasis


optional flexGrow?: number

Defined in: ui/src/types.ts:123

LayoutProps.flexGrow


optional flexShrink?: number

Defined in: ui/src/types.ts:124

LayoutProps.flexShrink


optional gap?: number

Defined in: ui/src/types.ts:451

Gap between child cards (forwarded to the content stack).


optional height?: LayoutValue

Defined in: ui/src/types.ts:115

LayoutProps.height


optional left?: PositionValue

Defined in: ui/src/types.ts:146

Offset from the containing block’s left edge — px or "<n>%" (only applies to position: "absolute").

LayoutProps.left


optional margin?: number | { bottom?: number; left?: number; right?: number; top?: number; }

Defined in: ui/src/types.ts:120

LayoutProps.margin


optional maxHeight?: LayoutValue

Defined in: ui/src/types.ts:119

LayoutProps.maxHeight


optional maxWidth?: LayoutValue

Defined in: ui/src/types.ts:117

LayoutProps.maxWidth


optional minHeight?: LayoutValue

Defined in: ui/src/types.ts:118

LayoutProps.minHeight


optional minWidth?: LayoutValue

Defined in: ui/src/types.ts:116

LayoutProps.minWidth


optional onScroll?: (offset) => void

Defined in: ui/src/types.ts:464

Called when the scroll offset changes.

number

void


optional padding?: Padding

Defined in: ui/src/types.ts:453

Padding inside the content stack.


optional position?: "relative" | "absolute"

Defined in: ui/src/types.ts:144

Positioning mode for this element relative to its parent. Defaults to "relative" — the element flows in the parent’s flex layout. Set to "absolute" to lift the element out of the flow and pin it via left / top / right / bottom against the parent’s content box.

A position: "relative" ancestor acts as the containing block for any absolute-positioned descendants — useful for HUD overlays, modal backdrops, and badge markers. See <ZStack> in @yagejs/ui-react for an opinionated overlay primitive.

LayoutProps.position


optional right?: PositionValue

Defined in: ui/src/types.ts:150

Offset from the containing block’s right edge — px or "<n>%" (only applies to position: "absolute").

LayoutProps.right


optional scrollbar?: boolean | ScrollbarOptions

Defined in: ui/src/types.ts:460

Scrollbar thumb. true (default) / omitted → default style; false → hidden (and no gutter reserved); an object → custom size / style. When shown, a gutter equal to the thumb’s footprint is reserved on the scroll-cross edge so content never renders under the thumb.


optional top?: PositionValue

Defined in: ui/src/types.ts:148

Offset from the containing block’s top edge — px or "<n>%" (only applies to position: "absolute").

LayoutProps.top


optional visible?: boolean

Defined in: ui/src/types.ts:153

LayoutProps.visible


optional width?: LayoutValue

Defined in: ui/src/types.ts:114

LayoutProps.width