Scroll View Paging with Container Relative Frame: Unexpected Over-scrolling

  Kiến thức lập trình

I am stuck on this issue how my scroll view is over scrolling each time it pages down. I want it so that the safe area above is ignored, the bottom of the current color is inline with the top of the TabBar, and the top of the next color is sitting under the TabBar. If anyone has a solution to this would it would be greatly appreciated. Here is my code and a video showing the issue.

struct Testing: View {
    @State private var colors: [Color] = [.red, .blue, .purple, .green, .pink, .yellow]
    var body: some View {
    TabView {
        ScrollView {
        LazyVStack(spacing: 0){
            ForEach(colors, id: .self) { color in
            ZStack {
                .containerRelativeFrame([.horizontal, .vertical])
        .ignoresSafeArea(edges: .top)
        .tabItem { Image(systemName: "house") }

I have tried every method on this [form](/questions/77730465/scrollview-over-scrolls-with-paging?noredirect=1&lq=1) with no luck.

New contributor

Noah Giboney is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.