How can I programmatically scroll in SwiftUI?

Question

There is a way in SwiftUI to scroll to a view. like this example:

ScrollView {

    ScrollViewReader { value in

        Button("Jump to #8") {

            // we scroll on button press
            value.scrollTo(8, anchor: .top)
        }
        .padding()

        ForEach(0..<100) { i in

            Text("Example \(i)")
                .font(.title)
                .frame(width: 200, height: 200)
                .background(colors[i % colors.count])
                
                // We need to set ID for scrolling
                .id(i)

        }
    }
}

But my UI is not so simple. I have a View and ViewModel. Also some views generated with some delay.

I need to scroll to some element after all views will be loaded.

Do it after is not a problem, but how to scroll to needed element programmatically from ViewModel?

@ObservedObject var model: someViewModel

var body: some View {
    ScrollView {
        ScrollViewReader { pageScroller in

            ForEach(0..<100) { i in
                Text("Example \(i)")
                    .frame(width: 200, height: 200)
                    .background(colors[i % colors.count])
                    .id(i)
            }
        }
    }
    .frame(height: 350)
}

class someViewModel: ObservableObject {
    @Published var scrollToPageName = 4
    var needToScroll = false

    init() { }
}

How to execute pageScroller.scrollTo(pageIndex, anchor: .top) from my model WITHOUT page refresh?

Or how to execute some view func from model by some event?

Also I need to not do refresh of the page before the scroll(!) - just like on button click from first example.

Do you want to know how you can scroll and use **pageScroller**? — ios coder, Mar 30 '21 at 15:39
@swiftPunk I need to know how to call `pageScroller.scrollTo(pageIndex, anchor: .top)` from my `viewModel` — Andrew_STOP_RU_WAR_IN_UA, Mar 30 '21 at 15:40

score 4 · Accepted Answer · edited Mar 30 '21 at 16:30

4

It's not the view model's responsibility to scroll, but what you can do is add a selectedIndex property to your view model, and observe and react to the change.

var body: some View {
    ScrollView {
        ScrollViewReader { pageScroller in
            ForEach(0..<100) { i in
                Text("Example \(i)")
                    .frame(width: 200, height: 200)
                    .background(colors[i % colors.count])
                    .id(i)
            }
            .onChange(of: viewModel.selectedIndex) { newIndex in
                pageScroller.scrollTo(newIndex, anchor: .top)
            }
        }
    }
    .frame(height: 350)
}

Since you mentioned that your content is loaded asynchronously, you can probably update the selectedIndex property once everything is loaded.

edited Mar 30 '21 at 16:30

ios coder

1
4
31
91

answered Mar 30 '21 at 15:45

EmilioPelaez

18,758
6
46
50

great! Thanks a lot! – Andrew_STOP_RU_WAR_IN_UA Mar 30 '21 at 15:46
is `viewModel.selectedIndex` must be a @Published for a such code? – Andrew_STOP_RU_WAR_IN_UA Mar 30 '21 at 15:57
It must be! for sure. – ios coder Mar 30 '21 at 16:00
Problem is that this will refresh the window view on change. But I need to do this WITHOUT view refresh. I need something like with a button click from my first sample(it will not do page refresh). Is it possible? – Andrew_STOP_RU_WAR_IN_UA Mar 30 '21 at 16:01
Normally it would not refresh, I use so much like that, have you tried? – ios coder Mar 30 '21 at 16:02
Yes, I have tried. It must to refresh page on each model's @Published property change. (if model is Observable/Observed object -- like model must to be) – Andrew_STOP_RU_WAR_IN_UA Mar 30 '21 at 16:04
then use onReceive, it will solve that issue – ios coder Mar 30 '21 at 16:05
@swiftPunk No it is not. Because of change of any @Published value automatically force `.ObjectWillChange` method call. And it will update the page. – Andrew_STOP_RU_WAR_IN_UA Mar 30 '21 at 16:35
@Andrew: Maybe you can make a question about it with code that make it happen. – ios coder Mar 30 '21 at 16:46
@swiftPunk I can't because it will not be "Minimal, Reproducible Example" because of I'm using some really specific libraries in my code. All needed information I have already give in my question. And there is already written "Minimal, Reproducible Example". – Andrew_STOP_RU_WAR_IN_UA Mar 30 '21 at 16:59
@Andrew: As I said I never faced such a issue before, I think it is because of that libraries. – ios coder Mar 30 '21 at 17:06
1

@swiftPunk This is not an issue. This is as designed behavior of SwiftUI. Please, read the following text: https://stackoverflow.com/a/62919526/4423545 for understanding basics of work with vievModels in swiftUI – Andrew_STOP_RU_WAR_IN_UA Mar 30 '21 at 17:14
1

@swiftPunk I have resolved issue and found solution for all of my problems and you both helped to me, swiftPunk and EmilioPelaez. I will write alternative answer in a few hrs that will work without view refresh. – Andrew_STOP_RU_WAR_IN_UA Mar 30 '21 at 21:21
@EmilioPelaez, marked your comment as an answer, even if it didn't resolve all of my problems. Thanks a lot for your help! It was really-really helpful! – Andrew_STOP_RU_WAR_IN_UA Mar 30 '21 at 21:36

score 0 · Answer 2 · answered Mar 30 '21 at 21:33

IMPORTANT! This answer will be usefull for you only if it is important to do not make refresh of the view. In another case better to use solution of EmilioPelaez

This answer shows how to:

send event from model to view

and execute some function when event was fired

Full view Refresh will be not fired! Only code will be executed just like on button press!

@ObservedObject var model: someViewModel

var body: some View {
    ScrollView {
        ScrollViewReader { pageScroller in

            ForEach(0..<100) { i in
                Text("Example \(i)")
                    .frame(width: 200, height: 200)
                    .background(colors[i % colors.count])
                    .id(i)
            }
            //Magic here
            .onReceive(model.scroller.objectWillChange) {
                pageScroller.scrollTo(model.scroller.scrollToPageName, anchor: .top)
            }
        }
    }
    .frame(height: 350)
}

class someViewModel: ObservableObject {
    //Magic here
    @ObservedObject var scroller: scrollerHelper

    init() {
        someDelayedCall()
    }

    func someDelayedCall(){
         scroller.scrollToPageName = 8
    }
}

//Magic here
class scrollerHelper: ObservableObject {
    @Published var scrollToPageName: Int = -1
}

How can I programmatically scroll in SwiftUI?

2 Answers2