Skip to main content
.scrollTargetLayout(isEnabled?: boolean): Component
​
isEnabled
boolean
default:"true"
Whether the layout acts as a scroll target. Defaults to true.

​
Support

​
Usage

Apply .scrollTargetLayout() to the inner container (e.g., HStack) and .scrollTargetBehavior("viewAligned") to the outer ScrollView. 
ScrollView({ axis: "horizontal" }, [
    HStack({ spacing: 16 }, items.map((item) =>
        VStack([
            Image({ url: item.image })
                .resizable()
                .scaledToFill()
                .frame({ width: 280, height: 180 })
                .clipped(),
            Text(item.title)
                .font("headline")
                .padding(12),
        ])
            .background(Color("white"))
            .cornerRadius(12)
            .shadow({ radius: 4 })
    )).scrollTargetLayout()
]).scrollTargetBehavior("viewAligned")

​
Disable snapping

HStack({ spacing: 16 }, items.map((item) =>
    Text(item.name)
        .frame({ width: 200, height: 100 })
)).scrollTargetLayout(false)

​
See Also