SwiftUI scroll to horizontal list item

Question

I'm able to scroll to a vertical List item using ScrollViewReader proxy.

I tried doing something similar with Horizontal list, but it totally messed up the view.

Any suggestion, how this can be done ?

tia!

   ScrollViewReader { proxy in
        ScrollView(.horizontal, showsIndicators:false) {
            ForEach(0..<items.count) { index in
                Text(items[index].title)
                    .id(index)
                    .onTapGesture {
                        print("tapped \(index)")
                    }
            }
            .onAppear{
                proxy.scrollTo(selectedIndex, anchor: .center)
            }
        }
    }

Does this answer your question? SwiftUI - ScrollViewReader's scrollTo does not scroll — mahan
– mahan, Commented Sep 22, 2021 at 7:01

Phil Dukhov · Accepted Answer · 2021-09-23 11:45:37Z

4

ScrollView will not layout your views in a row just because you've specified .horizontal scrolling.

You need to specify HStack/LazyHStack explicitly inside ScrollView.

Another problem you may have encountered is that the scrolling position is not accurate, this can be fixed with DispatchQueue.main.async:

ScrollViewReader { proxy in
    ScrollView(.horizontal, showsIndicators: false) {
        HStack { // or LazyHStack
            ForEach(0..<items.count) { index in
                Text(items[index].title)
                    .id(index)
                    .onTapGesture {
                        print("tapped \(index)")
                    }
            }
        }
        .onAppear {
            DispatchQueue.main.async { 
                proxy.scrollTo(selectedIndex, anchor: .center)
            }
        }
    }
}

edited Sep 23, 2021 at 11:45

answered Sep 22, 2021 at 7:30

Phil Dukhov

91k22 gold badges276 silver badges302 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

AQEEL AHMED Over a year ago

Thanks for the answer @Phil Dukhov. This works for me. Especially ``` DispatchQueue.main.async {}``` block did the work. For others help: In my case, I was navigating from one View to another (SwiftUI) and in the onAppear block, I was trying to scroll to the selected item. Just adding the above line works for me.

Collectives™ on Stack Overflow

SwiftUI scroll to horizontal list item

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related