Reference

an-scroll-view

A scrolling container, with pull-to-refresh and a scroll offset — and the two styles it needs from its parent or it will not scroll at all.

The system’s scroll view: UIScrollView, Android’s ScrollView, NSScrollView. The momentum, the rubber-banding at the edges, the scrollbar’s behaviour and the way it interacts with the keyboard are the platform’s, not an imitation.

The core reports contentSize — how much room the children take — computed assuming the overflow goes downwards. Horizontal scrolling is therefore not a missing host prop; it is work in an-core.

Availability

iOS · iPadOS	Android	macOS	tvOS	visionOS	watchOS	Wear OS
✓	✓	✓	✓	✓	✓	✓

What it becomes

iOS · iPadOS	Android	macOS	watchOS
`UIScrollView`	`ScrollView`	`NSScrollView`	`ScrollView`

Inputs

Prop	Type	Default
`showsScrollIndicator`	`boolean \| null`	`null`
`scrollEnabled`	`boolean \| null`	`true`	Whether the finger moves the content.
`bounces`	`boolean \| null`	`null`	iOS’s bounce on reaching the end.
`refreshing`	`boolean \| null`	`false`	Whether it is refreshing. Setting it to `false` closes the spinner; the gesture itself opens it, not this prop.

Outputs

Output	Payload
`(refresh)`	—	Pull to refresh.
`(scroll)`	`{ x, y }`	Emitted on every frame of the scroll. Layout computes the `contentSize` by itself: it is the size the children take up, and the core sends it to the `UIScrollView` whenever it changes.

`[ios]` — what UIKit has and the others do not

Key	Type
`pagingEnabled`	`boolean`	Scrolling comes to rest at multiples of the view’s size. `UIScrollView.isPagingEnabled`. Android does not ship it: its answer is `ViewPager2`, which is another view with its own adapter, not a prop.
`keyboardDismissMode`	`‘none’	‘onDrag’

It has to be allowed to be smaller than its content

A scroll view measured at its content height is not a scroll view — it is a very tall column, and the page scrolls instead of it. It needs a share of the space and permission to shrink:

<an-view [style.flexGrow]="'1'">
  <an-scroll-view [style.flexGrow]="'1'" [style.minHeight]="'0'" [style.overflow]="'scroll'">
    …
  </an-scroll-view>
</an-view>

This is the single most common reason a scroll view “does nothing”.

Example

<an-scroll-view
  [style.flexGrow]="'1'"
  [style.overflow]="'scroll'"
  [refreshing]="loading()"
  (refresh)="reload()"
  (scroll)="offset.set($event.y)">
  @for (row of rows(); track row.id) {
    <an-text>{{ row.name }}</an-text>
  }
</an-scroll-view>

Every primitive also carries the base props — background, border, opacity, the transforms, animate, the accessibility contract — and every gesture. See Components for the full base, Events for the payloads.