ios – SwiftUI: Nested scroll views on reverse axis

I’m making an attempt to create an interface with a vertical scroll view on the prime stage, then a horizontal scroll view (utilizing the brand new paginated scrolling from iOS 17) to show quite a few little one views that the person can scroll sideways between. Thus far it is behaving precisely as I would like, besides that the peak of the primary of the views within the horizontal scroll view appears to set the peak for every of the opposite views, even when they’ve a taller content material. To be sincere, I am unsure what conduct I think about this having, however I used to be questioning if anybody had solved an analogous concern or had designed an analogous structure one other manner.

Here’s a minimal reproducible instance:

import SwiftUI

struct ContentView: View {
    @State non-public var selectedTab: String? = "Tab 1"

    var physique: some View {
        ScrollView(.vertical) {
            LazyVStack {
                Picture(systemName: "picture.fill")
                    .resizable()
                    .aspectRatio(contentMode: .fill)

                ScrollView(.horizontal) {
                    LazyHStack(spacing: 0) {
                        SampleView(.purple, 5)
                            .id("Tab 1")
                            .containerRelativeFrame(.horizontal)

                        SampleView(.pink, 12)
                            .id("Tab 2")
                            .containerRelativeFrame(.horizontal)

                        SampleView(.blue, 20)
                            .id("Tab 3")
                            .containerRelativeFrame(.horizontal)
                    }
                    .scrollTargetLayout()
                }
                .scrollPosition(id: $selectedTab)
                .scrollTargetBehavior(.paging)
            }
        }
    }

    @ViewBuilder
    func SampleView(_ colour: Colour, _ dimension: Int) -> some View {
        LazyVGrid(columns: Array(repeating: GridItem(), depend: 2), content material: {
            ForEach(1...dimension, id: .self) { _ in
                RoundedRectangle(cornerRadius: 15)
                    .fill(colour.gradient)
                    .body(peak: 150)
            }
        })
    }
}

As you’ll be able to see from the instance, the peak of the horizontal scrollview is locked in on the peak of the primary little one view.