Components / Scroll

ScrollView

ScrollView is a Box that scrolls when its content overflows. It establishes the scroll context the rest of the family depends on, and brings a few quality-of-life defaults along the way.

Loading playground…

What it is

A <Box> with overflow: auto on the chosen axis, plus momentum scrolling on iOS Safari and overscroll-behavior: contain — so a scroll that reaches the end of the view does not bubble up and scroll the page behind it. The direction prop picks the axis; hideScrollbar removes the scrollbar visually while keeping the region scrollable and accessible.

Install

ScrollView is exported from usemotif. No separate install.

example.tsx

import { ScrollView } from 'usemotif';

API

ScrollView

stable

function ScrollView(props: ScrollViewProps): JSX.Element

direction"vertical" | "horizontal" | "both"= "vertical"

Scroll axis. `vertical` scrolls Y only, `horizontal` scrolls X only, `both` scrolls on either axis.

hideScrollbarboolean= false

Hide the scrollbar visually. The region stays scrollable by wheel, touch, and keyboard.

…BoxPropsBoxProps

Every Box prop. Set a fixed `h` (or `maxH`) so the content has a height to overflow.

Accessibility

A scrollable region needs a height to overflow against — set h or maxH, or the content expands and nothing scrolls. Keyboard users scroll a focused region with the arrow keys; that works as long as the region or something inside it can take focus.

hideScrollbar removes a visible affordance. The region is still operable by wheel, touch, and keyboard, but a pointer user loses the cue that there is more content. Reach for it only when another signal — a fade edge, a peeking next item — makes the overflow obvious.

Examples

A vertical scroll region:

example.tsx

<ScrollView h={400}>
{messages.map((m) => <Message key={m.id} {...m} />)}
</ScrollView>

A horizontal carousel with a hidden scrollbar:

example.tsx

<ScrollView direction="horizontal" hideScrollbar>
<HStack gap="$3">
  {covers.map((c) => <Cover key={c.id} {...c} />)}
</HStack>
</ScrollView>

Cross-platform notes

On web ScrollView is an overflow: auto Box with the momentum and overscroll defaults. On native it maps to React Native's ScrollView; the direction and hideScrollbar props carry across, and the iOS-momentum CSS is handled by the platform component instead.