WWDC24 – Augmented Code

WWDC’24 brought some updates to scrolling. One of which is onScrollGeometryChange(for:of:action:) what we can use for reacting to scroll geometry changes. The view modifier has two closures, where the first one is transforming the scroll geometry into an arbitrary equatable type of our liking. If that value changes, the action closure is called. It is a convenient way for triggering view updates or updating other states.

The new ScrollGeometry type provides the current scroll state:

bounds
containerSize
contentInsets
contentOffset
contentSize
visibleRect

	var body: some View {
	List(items, id: \.self) { item in
	Text(item)
	}
	.onScrollGeometryChange(
	for: CGRect.self,
	of: { scrollGeometry in
	scrollGeometry.visibleRect
	},
	action: { oldValue, newValue in
	print("visibleRect =", newValue)
	}
	)
	}

view raw Scroll.swift hosted with ❤ by GitHub

Here is another example where we can use the new modifier for showing a scroll to top button in combination with the new scrollPosition(_:anchor:) view modifier.

	struct ContentView: View {
	let items: [String] = (0..<100).map({ "Item \($0)" })
	@State private var canScrollToTop = false
	@State private var scrollPosition = ScrollPosition(idType: String.self)

	var body: some View {
	ScrollView {
	ForEach(items, id: \.self) { item in
	Text(item)
	.frame(maxWidth: .infinity)
	.padding()
	.onScrollVisibilityChange() { visible in
	print(item, visible)
	}
	}
	}
	.scrollPosition($scrollPosition)
	.overlay(alignment: .top) {
	if canScrollToTop {
	Button("Top") {
	withAnimation {
	scrollPosition.scrollTo(edge: .top)
	}
	}
	}
	}
	.onScrollGeometryChange(
	for: Bool.self,
	of: { scrollGeometry in
	scrollGeometry.contentOffset.y > 50
	},
	action: { oldValue, newValue in
	canScrollToTop = newValue
	}
	)
	}
	}

view raw ContentView.swift hosted with ❤ by GitHub

If this was helpful, please let me know on Mastodon@toomasvahter or Twitter @toomasvahter. Feel free to subscribe to RSS feed. Thank you for reading.

Support me on Patreon

Donate with Paypal

Buy me a coffee