Nested ScrollView stops scrollTo function

[ThushanS]

iOS 13, When we enabled the horizontal scrollview(Test View) inside the main scrollview, scrollTo function doesn't working.
Looking some solution to put horizontal scrollview inside the vertical scrollview.
Thank you.

var body: some View {
    VStack(alignment: .leading) {
        //MARK:- Top horizontal category list
        HStack(spacing: 30) {
            ForEach(categories, id: \.self) { category in
                Button(action: {
                    if let proxy = proxy {
                        proxy.scrollTo(category, alignment: .top, animated: true)
                    }
                }) {
                    Text(category)
                        .fixedSize(horizontal: true, vertical: true)
                }
            }
        }
        .padding(.horizontal)
        
        //MARK:- Main vertical ScrollView
        ScrollView(.vertical, showsIndicators: false) { proxy in
            VStack(alignment: .leading, spacing: 30) {
                
                //MARK:- Horizontal ScrollView
                ScrollView(.horizontal, showsIndicators: false) {
                //When we enabled the horizontal scrollview here, scroll to function doesn't working.
                    HStack{
                        Text("Test view")
                            .font(.title)
                            .bold()
                    }
                }
                
                //MARK:- Main " Subviews
                ForEach(categories, id: \.self) { category in
                    VStack(alignment: .leading) {
                        Text(category)
                            .font(.largeTitle)
                            .foregroundColor(Color.black)
                            .onTapGesture {
                                proxy.scrollTo(category)
                            }
                        VStack(alignment: .leading) {
                            ForEach(0..<5) { index in
                                Text("Subview \(index)")
                                    .padding()
                            }
                        }.padding(.top)
                    }
                    .scrollId(category)
                }
            }
            .onAppear { self.proxy = proxy }
        }
    }
    .padding(.horizontal)
}

[Amzd]

Can you try with ScrollViewProxy around the vertical ScrollView rather than using the convenience init?

If you have type collision issues due to SwiftUI 2.0 you can use AmzdScrollViewProxy

[ThushanS]

That's worked. Thank you. 👌

[Amzd]

Reopened because ScrollViewReader has to be inside the ScrollView to get the correct location of tagged views.

I suspect the issue is introspectScrollView returning the wrong UIScrollView when you have nested ScrollViews.

[Amzd]

Hey, can you please confirm this issue because when I copied your original code to test it just worked.

[ThushanS]

Appreciate your support. Issue #14 solved by moving the ScrollViewReader inside the ScrollView. But issue #13 started again. When I active the second scrollView (Horizontal) inside the main scrollView, the scrollTo function stoped.
Here is my code,

 struct ScrollViewTest: View {
    @State var categories: [String] = ["Cat One", "Cat Two", "Cat Three", "Cat Four"]
    @State private var proxy: ScrollViewProxy? = nil
    @State private var currentCategory: String?
    
    var body: some View {
        VStack(alignment: .leading) {
            ScrollView(.horizontal, showsIndicators: false) {
                HStack(spacing: 30) {
                    ForEach(categories, id: \.self) { category in
                        Button(action: {
                            DispatchQueue.main.async {
                                currentCategory = category
                            }
                            if let proxy = proxy {
                                DispatchQueue.main.async {
                                    proxy.scrollTo(category, alignment: .top, animated: true)
                                }
                            }
                        }) {
                            Text(category)
                                .foregroundColor(currentCategory == category ? Color.black : Color.blue)
                                .fixedSize(horizontal: true, vertical: true)
                        }
                    }
                }
                .padding(.horizontal)
            }
            
            ScrollView(.vertical, showsIndicators: false) {
                ScrollViewReader { proxy in
                    VStack(alignment: .leading, spacing: 30) {
                        //ScrollView(.horizontal, showsIndicators: false) {
                        //  HStack {
                        //      Text("Horizontal Views")
                        //  }
                        //}
                        ForEach(categories, id: \.self) { category in
                            VStack(alignment: .leading) {
                                Text(category)
                                    .font(.largeTitle)
                                    .foregroundColor(Color.black)
                                VStack(alignment: .leading) {
                                    ForEach(0..<12) { index in
                                        Text("Subview \(index)")
                                            .padding()
                                    }
                                }.padding(.top)
                            }
                            .scrollId(category)
                        }
                    }
                    .padding(.horizontal)
                    .onAppear { self.proxy = proxy }
                }
            }
        }
        .padding(.horizontal)
    }
    
}