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.
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
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()
}
}
}
}Want to drop iOS 13 support and move to the SwiftUI 2.0 version?
- Remove the Package
- Add this extension:
extension View {
public func scrollId<ID: Hashable>(_ id: ID) -> some View {
id(id)
}
}(Or replace all .scrollId with .id)
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent