How to make a scroll view move to a location using ScrollViewReader

About 2 min

How to make a scroll view move to a location using ScrollViewReader 관련

SwiftUI by Example

Back to Home

How to make a scroll view move to a location using ScrollViewReader | SwiftUI by Example

How to make a scroll view move to a location using ScrollViewReader

Updated for Xcode 15

If you want to programmatically make SwiftUI's ScrollView move to a specific location, you should embed a ScrollViewReader inside it. This provides a scrollTo() method that can move to any view inside the parent scrollview, just by providing its anchor.

For example, this creates 100 colored boxes in a vertical scroll view, and when you press the button it will scroll directly to the box with ID 8:

struct ContentView: View {
    let colors: [Color] = [.red, .green, .blue]

    var body: some View {
        ScrollViewReader { value in        
            ScrollView {
                Button("Jump to #8") {
                    value.scrollTo(8)
                }
                .padding()

                ForEach(0..<100) { i in
                    Text("Example \(i)")
                        .font(.title)
                        .frame(width: 200, height: 200)
                        .background(colors[i % colors.count])
                        .id(i)
                }
            }
        }
        .frame(height: 350)
    }
}

Download this as an Xcode projectopen in new window

For more control over your scroll, you can specify a second parameter called anchor, to control where your target view should be positioned after the scroll has completed.

For example, this will scroll to the same view as before, except this time place that view at the top:

struct ContentView: View {
    let colors: [Color] = [.red, .green, .blue]

    var body: some View {
        ScrollViewReader { value in        
            ScrollView {
                Button("Jump to #8") {
                    value.scrollTo(8, anchor: .top)
                }
                .padding()

                ForEach(0..<100) { i in
                    Text("Example \(i)")
                        .font(.title)
                        .frame(width: 200, height: 200)
                        .background(colors[i % colors.count])
                        .id(i)
                }
            }
        }
        .frame(height: 350)
    }
}