8.8 released—CSS Media Query support, SF Symbols and much more...
Learn more

<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