<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
tsorientation: 'horizontal' | 'vertical'
Gets or sets the direction in which the content can be scrolled.
Defaults to vertical.
tsscrollBarIndicatorVisible: boolean
Specifies if the scrollbar is visible.
Defaults to true.
tsisScrollEnabled: boolean
Enables or disables scrolling of the ScrollView.
verticalOffset
Gets the vertical offset of the scrolled content.
horizontalOffset
tshorizontalOffset: number
Gets the horizontal offset of the scrolled content.
tsscrollableHeight: number
Gets the maximum scrollable height, this is also the maximum value for the verticalOffset.
tsscrollableWidth: number = scrollView.scrollableWidth
Gets the maximum scrollable width, this is also the maximum value for the horizontalOffset.
Methods
tsscrollToVerticalOffset(value: number, animated: boolean)
Scrolls the content to the specified vertical offset.
Set animated to true for animated scroll, false for immediate scroll.
tsscrollToHorizontalOffset(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
tson('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
