<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>
html
<ScrollView>
  <StackLayout padding="12">
    <label text="v1" height="50"></label>
    <label text="v2" height="50"></label>
    <label text="v3" height="50"></label>
    <label text="v4" height="50"></label>
    <label text="v5" height="50"></label>
    <label text="v6" height="50"></label>
    <label text="v7" height="50"></label>
    <label text="v8" height="50"></label>
    <label text="v9" height="50"></label>
  </StackLayout>
</ScrollView>
tsx
<gridLayout rows="*, 50, 300, *">
  <scrollView orientation="horizontal" row="1">
    <stackLayout orientation="horizontal" padding="12">
      <label text="h1" width="50"></label>
      <label text="h2" width="50"></label>
      <label text="h3" width="50"></label>
      <label text="h4" width="50"></label>
      <label text="h5" width="50"></label>
      <label text="h6" width="50"></label>
      <label text="h7" width="50"></label>
      <label text="h8" width="50"></label>
      <label text="h9" width="50"></label>
    </stackLayout>
  </scrollView>

  <contentView row="2">
    <scrollView>
      <stackLayout padding="12">
        <label text="v1" height="50"></label>
        <label text="v2" height="50"></label>
        <label text="v3" height="50"></label>
        <label text="v4" height="50"></label>
        <label text="v5" height="50"></label>
        <label text="v6" height="50"></label>
        <label text="v7" height="50"></label>
        <label text="v8" height="50"></label>
        <label text="v9" height="50"></label>
      </stackLayout>
    </scrollView>
tsx
<scrollview>
  <stacklayout padding="12">
    <label text="v1" height="50"></label>
    <label text="v2" height="50"></label>
    <label text="v3" height="50"></label>
    <label text="v4" height="50"></label>
    <label text="v5" height="50"></label>
    <label text="v6" height="50"></label>
    <label text="v7" height="50"></label>
    <label text="v8" height="50"></label>
    <label text="v9" height="50"></label>
  </stacklayout>
</scrollview>
svelte
<scrollView>
  <stackLayout padding="12">
    <label text="v1" height="50"></label>
    <label text="v2" height="50"></label>
    <label text="v3" height="50"></label>
    <label text="v4" height="50"></label>
    <label text="v5" height="50"></label>
    <label text="v6" height="50"></label>
    <label text="v7" height="50"></label>
    <label text="v8" height="50"></label>
    <label text="v9" height="50"></label>
  </stackLayout>
</scrollView>
vue
<ScrollView>
  <StackLayout padding="12">
    <Label text="v1" height="50"></Label>
    <Label text="v2" height="50"></Label>
    <Label text="v3" height="50"></Label>
    <Label text="v4" height="50"></Label>
    <Label text="v5" height="50"></Label>
    <Label text="v6" height="50"></Label>
    <Label text="v7" height="50"></Label>
    <Label text="v8" height="50"></Label>
    <Label text="v9" height="50"></Label>
  </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
Next
SearchBar