8.6 Released with 🥽 visionOS support and more!
Check it out

<ScrollView> is a UI component for rendering scrollable content. Content can be scrolled vertically (default) or horizontally.

Note

A ScrollView can only have a single child element.

xml
<ScrollView>
  <StackLayout padding="12">
    <Label text="v1" height="50" />
    <Label text="v2" height="50" />
    <Label text="v3" height="50" />
    <Label text="v4" height="50" />
    <Label text="v5" height="50" />
    <Label text="v6" height="50" />
    <Label text="v7" height="50" />
    <Label text="v8" height="50" />
    <Label text="v9" height="50" />
  </StackLayout>
</ScrollView>

Props ​

orientation ​

ts
orientation: 'horizontal' | 'vertical'

Gets or sets the direction in which the content can be scrolled.

Defaults to vertical.

scrollBarIndicatorVisible ​

ts
scrollBarIndicatorVisible: boolean

Specifies if the scrollbar is visible.

Defaults to true.

isScrollEnabled ​

ts
isScrollEnabled: boolean

Enables or disables scrolling of the ScrollView.

verticalOffset ​

ts
verticalOffset: number

Gets the vertical offset of the scrolled content.

horizontalOffset ​

ts
horizontalOffset: number

Gets the horizontal offset of the scrolled content.

scrollableHeight ​

ts
scrollableHeight: number

Gets the maximum scrollable height, this is also the maximum value for the verticalOffset.

scrollableWidth ​

ts
scrollableWidth: number = scrollView.scrollableWidth

Gets the maximum scrollable width, this is also the maximum value for the horizontalOffset.

Methods ​

scrollToVerticalOffset() ​

ts
scrollToVerticalOffset(value: number, animated: boolean)

Scrolls the content to the specified vertical offset.

Set animated to true for animated scroll, false for immediate scroll.

scrollToHorizontalOffset() ​

ts
scrollToHorizontalOffset(value: number, animated: boolean)

Scrolls the content to the specified horizontal offset position.

Set animated to true for animated scroll, false for immediate scroll.

Events ​

scroll ​

ts
on('scroll', (args: ScrollEventData) => {
  const scrollView = args.object as ScrollView
  console.log('Scrolled', {
    scrollX: args.scrollX,
    scrollY: args.scrollY,
  })
})

Emitted when the ScrollView is scrolled.

See ScrollEventData.

Native component ​

Previous
Progress