I am using a ScrollViewReader, ScrollView, LazyVStack to organize a list of elements I want to be able to scroll to a specific location so i use elementID in the list and a UnitPoint value.
But the y value for unitpoint uses -0.1 to represent 100%. Is this intended behavior, a bug, or am i using something incorrectly?
I could not find this in the docs and it was only after debugging I found that proxy.scrollTo(id, UnitPoint(x:0, y:-0.1)) is how you scroll to the end of an item or proxy.scrollTo(id, UnitPoint(x:0, y:-0.05)) to scroll to the center.
Am I accessing the scrollTo property wrong or is this just how we use it? Also it seems .bottom is broken due to this aswell (as it uses 1 but the actual value that scrolls to the bottom is -0.1).
This seems like unintended behvaior as UnitPoints are supposed to be have values of 0-1
Here is a view which reproduces this behavior
struct ScrollTestView: View { @State private var scrollToId: String = "" @State private var scrollToAnchorY: String = "0.0" @State private var scrollProxy: ScrollViewProxy?
var body: some View {
VStack {
HStack(spacing: 12) {
TextField("Enter ID (1-30)", text: $scrollToId)
.frame(width: 120)
.padding(8)
.background(Color.gray.opacity(0.1))
.cornerRadius(8)
TextField("Anchor Y (0-1)", text: $scrollToAnchorY)
.frame(width: 120)
.padding(8)
.background(Color.gray.opacity(0.1))
.cornerRadius(8)
Button {
guard let targetId = Int(scrollToId),
let anchorY = Double(scrollToAnchorY),
let proxy = scrollProxy else {
return
}
let anchorPoint = UnitPoint(x: 0.5, y: anchorY)
proxy.scrollTo(targetId, anchor: anchorPoint)
} label: {
Text("Scroll")
.font(.subheadline)
.padding(.horizontal, 16)
.padding(.vertical, 8)
.background(Color.blue)
.foregroundColor(.white)
.cornerRadius(8)
}
Spacer()
}
.padding(.horizontal, 16)
.padding(.vertical, 8)
ScrollViewReader { proxy in
ScrollView {
LazyVStack {
ForEach(1...30, id: \.self) { itemId in
VStack {
HStack {
Text("Item \(itemId)")
.font(.title2)
.bold()
Spacer()
}
.padding(.vertical, 16)
Divider()
.background(Color.gray.opacity(0.6))
}
.id(itemId)
}
}
.padding()
}
.onAppear {
scrollProxy = proxy
}
}
}
}
}