Month: June 2023

The scroll view displays its content within the scrollable content region. As the user performs platform-appropriate scroll gestures, the scroll view adjusts what portion of the underlying content is visible. ScrollView can scroll horizontally, vertically, or both, but does not provide zooming functionality.

import SwiftUI

struct CardsView: View {
    
    var body: some View {
        content
            .navigationBarTitleDisplayMode(.inline)
    }
}

private extension CardsView {
    
    var content: some View {
        ScrollView {
            LazyVStack {
                ForEach(1..<20) { _ in
                    Color.purple
                        .frame(height: 120)
                        .cornerRadius(20)
                }
            }
        }
        .scrollIndicators(.hidden)
        .safeAreaInset(edge: .top) {
            ScrollView(.horizontal) {
                LazyHStack {
                    ForEach(1..<10) { _ in
                        Color.blue
                            .frame(height: 80)
                            .cornerRadius(20)
                            .containerRelativeFrame(.horizontal,
                                                    count: 5,
                                                    span: 2,
                                                    spacing: 8)
                    }
                }
                .scrollTargetLayout()
            }
            .scrollTargetBehavior(.viewAligned)
            .scrollIndicators(.hidden)
            .padding(.vertical, 8)
            .fixedSize(horizontal: false, vertical: true)
            .background(.thinMaterial)
        }
        .safeAreaPadding(.horizontal)
    }
}

#Preview {
    CardsView()
}

code on my GitHub