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

::: warning Note

A ScrollView can only have a single child element.

:::

<<< @/../examples/typescript/src/ui/ScrollView/template.xml#example

<<< @/../examples/angular/src/ui/ScrollView/component.html#example

<<< @/../examples/react/src/components/ui/scrollview.tsx#example

<<< @/../examples/solid/src/ui/scrollview.tsx#example

<<< @/../examples/svelte/app/components/ui/ScrollView.svelte#example

<<< @/../examples/vue/src/ui/ScrollView/component.vue#example

orientation: 'horizontal' | 'vertical'

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

Defaults to vertical.

scrollBarIndicatorVisible: boolean

Specifies if the scrollbar is visible.

Defaults to true.

isScrollEnabled: boolean

Enables or disables scrolling of the ScrollView.

verticalOffset: number

Gets the vertical offset of the scrolled content.

horizontalOffset: number

Gets the horizontal offset of the scrolled content.

scrollableHeight: number

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

scrollableWidth: number = scrollView.scrollableWidth

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

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(value: number, animated: boolean)

Scrolls the content to the specified horizontal offset position.

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

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.

• Android: android.view
• iOS: UIScrollView
• Linux: GtkScrolledWindow