Skip to main content
.scrollTargetBehavior(behavior: "viewAligned" | "paging"): Component
​
behavior
"viewAligned" | "paging"
required
The snapping behavior:
  • "viewAligned" — snaps to child views marked with .scrollTargetLayout()
  • "paging" — snaps to page boundaries (one screen width or height at a time)

​
Support

​
Usage

​
View-aligned snapping

Combine with .scrollTargetLayout() on the inner container to snap to individual child views. 
ScrollView({ axis: "horizontal" }, [
    HStack({ spacing: 16 }, items.map((item) =>
        Text(item.name)
            .frame({ width: 300, height: 200 })
            .background(Color("blue"))
            .cornerRadius(12)
    )).scrollTargetLayout()
]).scrollTargetBehavior("viewAligned")

​
Paging behavior

ScrollView({ axis: "horizontal" }, [
    HStack({ spacing: 0 }, pages.map((page) =>
        Image({ url: page.url })
            .resizable()
            .scaledToFill()
            .frame({ width: 375, height: 600 })
            .clipped()
    ))
]).scrollTargetBehavior("paging")

​
See Also