I have a horizontal scroll user experience with a ScrollView and an HStack. I wanted to figure out a way to realize that the user has reached the end of the HStack.

To accomplish that, I used this solution (open to better solutions)

The functionality works as expected and I can realize when the user is at the end of the scrollview.

This is my code so far

var body: some View {
    ScrollView(.horizontal) {
        LazyHStack(spacing: 10) {
            content
            endOfListView
        }
    }
}

private var endOfListView: some View {
    Color.clear
        .frame(width: .zero, height: .zero)
        .onAppear {
            didReachEnd = true
        }
}

The issue I am having now is that even the endOfListView has a frame of .zero, an additional 10 spacing is added because of the spacing set in the HStack constructor.

I tried to add this .padding(.leading, -10) to the endOfListView, however, that didn’t help and the spacing was still there.

I also came across a similar problem but doesn’t concern the spacing so I couldn’t apply it.

Is there a way override the spacing for specific elements within an HStack or an alternative way to solve this ?