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