SwiftUI: How to Programmatically Scroll to a Row

Learn how to scroll easily and programmatically to a certain row of the ScrollView

Source: Undraw

SwiftUI ScrollView can get really tedious to handle when performing simple tasks that were immediate with the old dear UIKit could be very very frustrating.

Well, scrolling to the desired row is one of those things, sadly.

In UIKit, every UIScrollView has a very handy method to scroll programmatically the view itself:

func setContentOffset(CGPoint, animated: Bool)

In the same manner, every sort of subclasses has similar methods; for instance in a UITableView you could use:

func scrollToRow(at: IndexPath, at: UITableView.ScrollPosition, animated: Bool)

Surprisingly those simple functions are missing in SwiftUI at the present day, so we have to code something a little more complicated to perform the same task.

We are going to create a demo app able to reproduce the following behavior:

Just like the last article, it’s time to code the very simple UI shown above. We’ll use just a List and a Pickerviews:

Of course, this plain UI is not working. When we select an item using the wheel picker nothing happens.

We would like to have some kind of component which is able to watch and read what’s happening inside the ScrollView

Well, with iOS 14 Apple introduced a new struct called ScrollViewProxy defined as follow:

Scans all scroll views contained by the proxy for the first with a child view with identifier `id`, and then scrolls to that view.

In the same part of the official SwiftUI documentation we can also read:

You don’t create instances of ScrollViewProxy directly. Instead, your ScrollViewReader receives an instance of ScrollViewProxy in its content view builder.

So, as suggested by Apple itself, we will use the ScrollViewReaderview instead!

This new component is a Viewwith a proxy scrollView inside. So we can start to modify our UI in the following way:

Few inferences from the above code:

• In line 8 the use of the ScrollViewReaderview.
• In line 11 we added the modifier .id(index)to the Textview. As often happens in SwiftUI, we can uniquely identify an element with an id. That’s exactly what we have done here.

Now it’s time to create the real code able to scroll our list programmatically.
In line 22, where I’ve added the comment// More to come...we will bind the selection of the picker with an action.

Let’s write a few lines of code:

The Justoperator comes from the Combine framework, so we need to add an import at the top of our file: #import Combine.

Well, it’s done!

Now when we select a picker row, the upper Listwill scroll to a certain row.

Yes. You may have noticed that this code works but it is not nice. The UX is not nice at all with that sort of “jump”.

Let’s add a simple but pleasant animation to the scroll:

The example is done and it’s time to show the full code in a single place:

In less than forty lines we have achieved what we needed.

As you can see, once you have understood the basic mechanism, the whole procedure is quite straightforward, you just have to remember to add an id to the item you want to scroll to.

Thanks for reading. This same guide is available also as a video on my YouTube Channel: