ScrollView Paging ScrollTargetBehavior not aligning correctly when using contentMargins

Everything works as expected until I add the paging behavior to the scrollView with a non-zero content margin. The paging behavior ends up not being centered on the cards.

Here is a simple example:

import SwiftUI

struct CarouselView: View {
    var body: some View {
        ScrollView(.horizontal, showsIndicators: false) {
            HStack(spacing: 0) {
                ForEach(0 ..< 5, id: \.self) { _ in
                    RoundedRectangle(cornerRadius: 25)
                        .fill(.ultraThinMaterial)
                        .containerRelativeFrame(.horizontal)
                        .scrollTransition(axis: .horizontal, transition: {
                            content, phase in
                            content
                                .scaleEffect(x: phase.isIdentity ? 1 : 0.8, y: phase.isIdentity ? 1 : 0.8)
                        })
                }
            }
            .scrollTargetLayout()
        }
        .scrollTargetBehavior(.paging)
        .contentMargins(60) // NOTE: I want to see the sides of the next and previous card
        .background(Gradient(colors: [.purple, .red]))
    }
}

Thanks!

Accepted Reply

Solved: The solution is to use .scrollTargetBehavior(.viewAligned)

Replies

Solved: The solution is to use .scrollTargetBehavior(.viewAligned)