ScrollView Stable WINMACLNX

A vertically-scrollable container. Children are laid out in full and clipped to the viewport; the user scrolls with the mouse wheel, scrollbar drag, or keyboard.

Import

import { ScrollView } from '@glyx-dev/react'

Basic usage

<ScrollView width={400} height={300}>
  {items.map(item => (
    <View key={item.id} style={{ padding: 16, borderBottomWidth: 1, borderBottomColor: '#2A2A3A' }}>
      <Text>{item.title}</Text>
    </View>
  ))}
</ScrollView>

Props

Prop	Type	Default	Description
`width`	`number`	—	Viewport width in px. No default — behaves like any `View` width (flex/style-driven) if omitted.
`height`	`number`	—	Viewport height in px. No default — only set this if you need a fixed height; otherwise it sizes to its layout context.
`contentHeight`	`number`	auto	Explicit total content height. More reliable than auto-detection for dynamic lists.
`showScrollbar`	`boolean`	`true`	Show the scrollbar track and thumb
`scrollbarWidth`	`number`	`8`	Scrollbar thumb width in px
`scrollbarColor`	`string`	`'#8c8caa99'`	Scrollbar thumb color (supports alpha)
`style`	`ViewStyle`	—	Additional styles applied to the outer container

All other View props (onMount, disabled, etc.) are forwarded.

Keyboard navigation

When the cursor is over a ScrollView and no text input is focused, keyboard navigation is active:

Key	Action
`↑` / `↓`	Scroll by one line (~24 px)
`Page Up` / `Page Down`	Scroll by one viewport height minus one line
`Ctrl + Home`	Jump to top
`Ctrl + End`	Jump to bottom

Page Up/Page Down and Ctrl+Home/Ctrl+End also work while a text input inside the scroll view is focused.

`contentHeight` tip

Glyx auto-estimates contentHeight by summing the height props of direct children. For dynamic lists where children don't have explicit heights, pass contentHeight explicitly:

<ScrollView height={400} contentHeight={items.length * 56}>
  {items.map(item => <Row key={item.id} height={56} item={item} />)}
</ScrollView>

Performance

For large lists (100+ items), prefer VirtualizedList — it only renders the items currently visible in the viewport. ScrollView renders all children at once.

Pressable Image