josh150 / scrollviewproxy

ScrollViewProxy for SwiftUI on iOS 13 and up

As of June 22 2020 this is included in the SwiftUI 2 beta. https://developer.apple.com/documentation/swiftui/scrollviewproxy

The Apple implementation uses just .id(_:) and I had update issues with that where Views with an id sometimes won't update when their ObservedObject changed. Maybe this has been fixed in the new SwiftUI 2 beta.

Also the Apple implementation only supports iOS 14 so I think this repo is still useful for backwards compatibility.

Note: An important difference between this library and Apples implementation is that the ScrollViewReader goes inside the ScrollView. If you place the ScrollViewReader around the ScrollView the scrollTo function will not scroll to the correct location (due to its coordinateSpace not being part of the scrolling content). I considered fixing this to align with Apple but that would break backwards compatibility with projects already using ScrollViewProxy.

Maybe it's possible to detect if we're inside or outside of a ScrollView in the reader but then how do we handle nested ScrollViews? If you have any ideas please open an Issue/PR or email me.

ScrollViewProxy

Adds ScrollViewReader and ScrollViewProxy that help you scroll to locations in a ScrollView

To get a ScrollViewProxy you can either use the conveinience init on ScrollView

ScrollView { proxy in
    ...
}

or add a ScrollViewReader to any View that creates a UIScrollView under the hood

List {
    ScrollViewReader { proxy in
        ...
    }
}

The ScrollViewProxy currently has one variable and two functions you can call

/// A publisher that publishes changes to the scroll views offset
public var offset: OffsetPublisher

/// Scrolls to an edge or corner
public func scrollTo(_ alignment: Alignment, animated: Bool = true)

/// Scrolls the view with ID to an edge or corner
public func scrollTo(_ id: ID, alignment: Alignment = .top, animated: Bool = true)

To use the scroll to ID function you have to add an ID to the view you want to scroll to

ScrollView { proxy in
    HStack { ... }
        .scrollId("someId")
}

This is the only part that is different from the SwiftUI 2.0 implementation because I don't know how to access Views by ID from the .id(_:) function

Example

Everything put together in an example

struct ScrollViewProxyExample: View {
    
    @State var randomInt = Int.random(in: 0..<200)
    @State var proxy: ScrollViewProxy? = nil
    @State var offset: CGPoint = .zero
    
    var body: some View {
        // GeometryReader for safeAreaInsets on Sticky View
        GeometryReader { geometry in 
            VStack {
                ScrollView { proxy in
                    Text("Sticky View")
                        .background(Color.white)
                        .onReceive(proxy.offset) { self.offset = $0 }
                        .offset(x: offset.x, y: offset.y + geometry.safeAreaInsets.top)
                        .zIndex(1)
                    
                    VStack(spacing: 20) {
                        ForEach(0..<200) { index in
                            HStack {
                                Spacer()
                                Text("Item: \(index)").font(.title)
                                Spacer()
                            }.scrollId(index)
                        }
                    }
                    .zIndex(0)
                    .onAppear {
                        self.proxy = proxy
                    }
                }
                HStack {
                    Button(action: {
                        self.proxy?.scrollTo(self.randomInt, alignment: .center)
                        self.randomInt = Int.random(in: 0..<200)
                    }, label: {
                        Text("Go to \(self.randomInt)")
                    })
                    Spacer()
                    Button(action: { self.proxy?.scrollTo(.bottom) }, label: {
                        Text("Bottom")
                    })
                    Spacer()
                    Button(action: { self.proxy?.scrollTo(.center) }, label: {
                        Text("Center")
                    })
                }.padding()
            }
        }
    }
}

Deintegrate

Want to drop iOS 13 support and move to the SwiftUI 2.0 version?

1. Remove the Package
2. Add this extension:

extension View {
    public func scrollId<ID: Hashable>(_ id: ID) -> some View {
        id(id)
    } 
}

(Or replace all .scrollId with .id)