SwiftUI ScrollView and Automatically Scrolling to Bottom

In SwiftUI, the ScrollView is a powerful and flexible container view that allows users to scroll through a list of content. However, by default, the scroll view does not automatically scroll to the bottom when new content is added. In this article, we will explore how to implement automatic scrolling to the bottom of a ScrollView in SwiftUI.

Creating a Basic ScrollView

Before we dive into implementing automatic scrolling, let’s first create a basic ScrollView in SwiftUI:

import SwiftUI

struct ContentView: View {
    var body: some View {
        ScrollView {
            VStack(spacing: 20) {
                ForEach(1...20, id: \.self) { index in
                    Text("Item \(index)")
                }
            }
            .padding()
        }
    }
}

In the above code, we’re using a VStack inside the ScrollView to hold a list of Text views. We’re using the ForEach loop to iterate over a range of numbers and display them as items in the list.

If you run the above code, you’ll see that you can scroll through the items in the ScrollView. However, when new content is added to the ScrollView dynamically, the scroll position remains the same, and the user has to manually scroll down to see the new content.

Implementing Automatic Scrolling to the Bottom

To implement automatic scrolling to the bottom of the ScrollView, we need to use a combination of GeometryReader and UIScrollView.

Here’s an updated version of the previous code that includes automatic scrolling:

import SwiftUI

struct ContentView: View {
    @State private var scrollProxy: ScrollViewProxy?
    
    var body: some View {
        ScrollViewReader { proxy in
            ScrollView {
                VStack(spacing: 20) {
                    ForEach(1...20, id: \.self) { index in
                        Text("Item \(index)")
                    }
                    .onAppear {
                        scrollProxy = proxy
                    }
                }
                .padding()
                .onChange(of: scrollProxy) { _ in
                    scrollToBottom()
                }
            }
        }
    }
    
    private func scrollToBottom() {
        withAnimation {
            scrollProxy?.scrollTo(20)
        }
    }
}

Let’s go through the changes step by step:

• We added a scrollProxy property to hold a reference to the ScrollViewProxy instance.
• We wrapped the ScrollView in a ScrollViewReader view and passed a closure that received the proxy value. This allows us to access the ScrollViewProxy and store it in our scrollProxy property.
• Inside the VStack containing our list items, we added an onAppear modifier to the Text view. In the onAppear closure, we set the scrollProxy property to the received proxy value. This ensures that the scrollProxy property is updated when the view appears on the screen.
• We added an onChange modifier to the ScrollView and observed changes to the scrollProxy value. In the closure, we call the scrollToBottom() method, which will be responsible for scrolling the ScrollView to the bottom.
• Finally, we added a scrollToBottom() method that uses the scrollProxy to scroll the ScrollView to the bottom. We wrap the scrolling operation in an withAnimation block to animate the scrolling motion.

If you run the updated code, you’ll notice that each time the view appears, the scrollProxy property is updated, and the ScrollView automatically scrolls to the bottom. This allows users to see the latest content without manually scrolling.

Dynamic Content Scrolling

In the previous example, we had a fixed number of items in the VStack. But what if we want to add items dynamically? Let’s modify our code to include a button that adds a new item to the list:

import SwiftUI

struct ContentView: View {
    @State private var scrollProxy: ScrollViewProxy?
    @State private var items = [String]()
    
    var body: some View {
        VStack(spacing: 20) {
            ScrollViewReader { proxy in
                ScrollView {
                    VStack(spacing: 20) {
                        ForEach(items, id: \.self) { item in
                            Text(item)
                        }
                        .onAppear {
                            scrollProxy = proxy
                        }
                    }
                    .padding()
                    .onChange(of: scrollProxy) { _ in
                        scrollToBottom()
                    }
                }
            }
            
            Button("Add Item") {
                let newItem = "Item \(items.count + 1)"
                items.append(newItem)
                scrollProxy?.scrollTo(newItem)
            }
        }
        .padding()
    }
    
    private func scrollToBottom() {
        withAnimation {
            scrollProxy?.scrollTo(items.count - 1)
        }
    }
}

In the modified code, we added a new empty array called items to hold the dynamic list of items. We also included a Button that, when tapped, adds a new item to the items array.

Inside the ScrollView, we replaced the static range-based ForEach loop with a dynamic ForEach loop that iterates over the items array. As new items are added, they will be displayed in the ScrollView.

In the Button action closure, we append a new item to the items array and call scrollProxy?.scrollTo(newItem) to scroll to the last added item immediately.

If you run the modified code, you’ll see that each time you tap the „Add Item“ button, a new item is added to the ScrollView and the ScrollView automatically scrolls to the bottom to display the new item.

Closing Summary

In this article, we learned how to implement automatic scrolling to the bottom of a ScrollView in SwiftUI. By combining ScrollViewProxy with ScrollViewReader, we were able to access the underlying UIScrollView and perform automatic scrolling to the bottom whenever new content is added.

Implementing automatic scrolling can greatly enhance the user experience in your SwiftUI apps, especially when dealing with dynamic content updates. Remember to wrap the scrolling operations in an withAnimation block to give the scrolling motion a smooth and animated feel.