Preserve Scroll Position in ScrollView when Adding New Items

Both of these solutions seem to fail if we use a random string instead of integer for the value displayed in the Text object. Try with this please...

struct ContentView: View {
    var body: some View {
        GoodChatView()
    }
}

struct Message: Identifiable, Equatable {
    let id: Int
    let text: String
    
    static func == (lhs: Message, rhs: Message) -> Bool {
        return lhs.id == rhs.id
    }
}

struct ChatMessage: View {
    var text: String
    
    var body: some View {
        Text(text)
            .frame(width: 200)
            .padding()
            .background(Color.gray.opacity(0.2))
            .cornerRadius(8)
    }
}



struct GoodChatView: View {
    @State private var messages: [Message] = []
    @State private var isLoading = true

    var body: some View {
        ScrollViewReader { scrollView in
            ScrollView {
                LazyVStack {
                    ForEach(messages.reversed(), id: \.id) { message in
                        ChatMessage(text: "\(message.text)")
                            .background {
                                GeometryReader { proxy in
                                    let minY = proxy.frame(in: .scrollView).minY
                                    let isReadyForLoad = abs(minY) <= 0.01 && message == messages.last
                                    Color.clear
                                        .onChange(of: isReadyForLoad) { oldVal, newVal in
                                            if newVal && !isLoading {
                                                isLoading = true
                                                Task { @MainActor in
                                                    await loadMoreData()
                                                    await Task.yield()
                                                    scrollView.scrollTo(message.id, anchor: .top)
                                                    await resetLoadingState()
                                                }
                                            }
                                        }
                                }
                            }
                            .onAppear {
                                if !isLoading && message == messages.first {
                                    isLoading = true
                                    Task {
                                        await loadNewData()

                                        // When new data is appended, the scroll position is
                                        // retained - no need to set it again

                                        await resetLoadingState()
                                    }
                                }
                            }
                    }
                }
            }
            .task { @MainActor in
                await loadNewData()
                if let firstMessageId = messages.first?.id {
                    try? await Task.sleep(for: .milliseconds(10))
                    scrollView.scrollTo(firstMessageId, anchor: .bottom)
                }
                await resetLoadingState()
            }
        }
    }

    @MainActor
    func loadMoreData() async {
        let lastId = messages.last?.id ?? 0
        print("old data > \(lastId)")
        var oldMessages: [Message] = []
        for i in 25...50 {
            let message = Message(id: i, text: randomString(length: i))
            oldMessages.append(message)
        }
        messages += oldMessages
    }

    @MainActor
    func loadNewData() async {
        let firstId = messages.first?.id ?? 21
        print("new data < \(firstId)")
        var newMessages: [Message] = []
        for i in 25...50 {
            let message = Message(id: i, text: randomString(length: i))
            newMessages.append(message)
        }
        messages.insert(contentsOf: newMessages, at: 0)
    }

    @MainActor
    private func resetLoadingState() async {
        try? await Task.sleep(for: .milliseconds(500))
        isLoading = false
    }
    
    func randomString(length: Int) -> String {

        let letters : NSString = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789"
        let len = UInt32(letters.length)

        var randomString = ""

        for _ in 0 ..< length {
            let rand = arc4random_uniform(len)
            var nextChar = letters.character(at: Int(rand))
            randomString += NSString(characters: &nextChar, length: 1) as String
        }

        return randomString
    }
}

Tried the accepted answer, faced issue with flickering when fetching the history data that I simply couldn't resolve (might be a skill issue). However, after 3 days of digging, I found a native implementation of this done by apple using

• scrollTargetLayout()
• scrollPosition($scrolledID)

All you need to do is store an identifier of your view as a either @State var in your view or @Published in your view model before fetching history.

Identifier is stored right before making the API request to fetch history.

You can find all the details about it here: https://developer.apple.com/documentation/swiftui/view/scrollposition(_:anchor:)

Also, a code sample of how to implement it:

var messagesListView: some View {
        ScrollViewReader { scrollView in
            ScrollView(showsIndicators: false) {
                LazyVStack(spacing: 10) {
                    ForEach(viewModel.receivedMessages, id: \.externalId) { message in
                        ChatMessageView(
                            direction: message.direction,
                            message: message.message,
                            hoursMinutes: message.formatTime(),
                            messageType: message.type,
                            readStatus: Binding(
                                get: {
                                    guard let _message = viewModel.receivedMessages.first(where: { $0.externalId == message.externalId }) else {
                                        return .delivered
                                    }

                                    return _message.readStatus
                                },
                                set: { _ in }
                            )
                        )
                        .padding(.horizontal)
                        .background {
                            GeometryReader { proxy in
                                let minY = proxy.frame(in: .scrollView).minY
                                let isReadyForLoad = abs(minY) <= 0.01 && message == viewModel.receivedMessages.first
                                Color.clear
                                    .onChange(of: isReadyForLoad) { _, newVal in
                                        if newVal && !viewModel.isLoadingHistory {
                                            Task { @MainActor in
                                                await viewModel.fetchMessageHistory()
                                            }
                                        }
                                    }
                            }
                        }
                    }

                    Color.clear
                        .frame(height: 1)
                        .id("bottomAnchor")
                        .padding(.top, viewModel.isSupportTyping ? 20 : 0)
                }
                .scrollTargetLayout()
            }
            .scrollPosition(id: $viewModel.lastMessageId)

            .onChange(of: viewModel.receivedMessages) { oldMessages, newMessages in
                if !hasScrolledToBottom {
                    DispatchQueue.main.async {
                        withAnimation {
                            scrollView.scrollTo("bottomAnchor", anchor: .bottom)
                        }
                    }
                    hasScrolledToBottom = true 
                }
            }
            .onChange(of: keyboardHeight) { _, newValue in

                if newValue > 100 {
                    scrollToBottom(proxy: scrollView)
                }
            }
        }
        .contentShape(Rectangle())
        .onTapGesture(perform: dismissKeyboard)
    }

This is such a tricky thing to get right. After much experimentation I have created a two-layer solution that works smoothly on iOS 18 and compiles with Swift 6. It also works on macOS when run in iPad mode. (See the gist link below).

You can add content to top and bottom without affecting the scroll position even while scrolling interactively.

The solution involves a wrapped UIScrollView that creates an illusion of infinite scrolling by manipulating its contentInset and content's position on the fly, at the same time. This is something that's currently impossible with SwiftUI's ScrollView, even using the new .contentMargins modifier since it appears to be buggy when used with negative margins.

The solution provides two "layers":

• InfiniteView - a lower-level infinite scroller for arbitrary content. It calls your async closure when the user approaches one of the edges; the closure is expected to add content to top or bottom and trigger a render of the view. With this component, you should know the total height of content added to the top and pass it to the view via the headroom parameter.

• InfiniteList - a higher-level lazy list manager based on the infinite scroller view. It expects you to provide a list of Identifiable items that also "know" their heights. The items are rendered in a lazy manner, i.e. those that are too far from the screen are not rendered.

Gist

Example usage that can be found in the preview of the `InfiniteList` component:

private let page = 20
private let cellSize = 100.0

#Preview {

    struct Item: InfiniteListItem {
        let id: Int
        var height: Double { cellSize }
        static func from(range: Range<Int>) -> [Self] { range.map { Self(id: $0) } }
    }

    struct Preview: View {

        @State private var range = 0..<page
        @State private var action: InfiniteViewAction? = .bottom(animated: false)

        var body: some View {
            InfiniteList(Item.from(range: range)) { item in
                Text("Row \(item.id)")
                .frame(maxWidth: .infinity, maxHeight: .infinity)
            } onLoadMore: { edge in
                switch edge {
                    case .top:
                        guard range.lowerBound >= -60 else { return true }
                        try? await Task.sleep(for: .seconds(1))
                        range = (range.lowerBound - page)..<(range.upperBound)
                        return false
                    default:
                        return true
                }
            }
            .scrollTo($action)
            .ignoresSafeArea()
        }
    }

    return Preview()
}