ScrollPhaseChangeContext – Augmented Code

In addition to scroll related view modifiers covered in the previous blog post, there is another one for detecting scroll view phases aka the state of the scrolling. The new view modifier is called onScrollPhaseChange(_:) and has three arguments in the change closure: old phase, new phase and a context.

ScrollPhase is an enum with the following values:

animating – animating the content offset
decelerating – user interaction stopped and scroll velocity is decelerating
idle – no scrolling
interacting – user is interacting
tracking – potential user initiated scroll event is going to happen

The enum has a convenience property of isScrolling which is true when the phase is not idle.

ScrollPhaseChangeContext captures additional information about the scroll state, and it is the third argument of the closure. The type gives access to the current ScrollGeometry and the velocity of the scroll view.

Here is an example of a scroll view which has the new view modifier attached.

	struct ContentView: View {
	@State private var scrollState: (
	phase: ScrollPhase,
	context: ScrollPhaseChangeContext
	)?
	let data = (0..<100).map({ "Item \($0)" })

	var body: some View {
	NavigationStack {
	ScrollView {
	ForEach(data, id: \.self) { item in
	Text(item)
	.frame(maxWidth: .infinity)
	.padding()
	.background {
	RoundedRectangle(cornerRadius: 8)
	.fill(Color.cyan)
	}
	.padding(.horizontal, 8)
	}
	}
	.onScrollPhaseChange { oldPhase, newPhase, context in
	scrollState = (newPhase, context)
	}
	Divider()
	VStack {
	Text(scrollStateDescription)
	}
	.font(.footnote.monospaced())
	.padding()
	}
	}

	private var scrollStateDescription: String {
	guard let scrollState else { return "" }
	let velocity: String = {
	guard let velocity = scrollState.context.velocity else { return "none" }
	return "\(velocity)"
	}()
	let geometry = scrollState.context.geometry
	return """
	State at the scroll phase change

	Scrolling=\(scrollState.phase.isScrolling)
	Phase=\(scrollState.phase)
	Velocity
	\(velocity)
	Content offset
	\(geometry.contentOffset)
	Visible rect
	\(geometry.visibleRect.integral)
	"""
	}
	}

view raw ScrollPhase.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