Horizontal & Vertical ScrollView
Scroll arbitrary content in any direction.
Horizontal & Vertical ScrollView is a free SwiftUI Academy lesson on CoddyKit — lesson 1 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the SwiftUI Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
Beyond One Screen
Sometimes your content is taller than the screen. A ScrollView lets users glide past the edges to see it all. 📜
ScrollView {
Text("Lots of content here")
}Vertical by Default
A plain ScrollView scrolls up and down. Wrap a tall VStack inside and everything becomes swipeable.
ScrollView {
VStack {
Text("Top")
Text("Bottom")
}
}Going Horizontal
Pass .horizontal as the axis and your content scrolls left and right instead, great for image carousels.
ScrollView(.horizontal) {
HStack {
Text("One")
Text("Two")
}
}Pick Your Axis
The first argument is the axis: use .vertical, .horizontal, or even both for free, two-way scrolling.
ScrollView([.horizontal, .vertical]) {
BigContent()
}Hiding the Indicator
Set showsIndicators to false to hide the little scroll bar for a cleaner, more designed look.
ScrollView(.horizontal, showsIndicators: false) {
HStack { /* cards */ }
}Content Sizes Itself
A ScrollView only scrolls when its content is bigger than the visible area. Short content just sits still.
Pair with a Stack
Always put a VStack or HStack inside, since a ScrollView holds one child and the stack lines the rest up.
ScrollView {
VStack(spacing: 16) {
Card()
Card()
}
}Free-form vs List
Reach for a ScrollView when you want full layout freedom; a List adds rows and separators for you.
Add Some Padding
Give inner content padding so it does not hug the screen edges as users scroll past it.
ScrollView {
VStack { /* content */ }
.padding()
}Carousels Made Easy
A horizontal ScrollView of cards is the classic recipe for a swipeable carousel of photos or products.
ScrollView(.horizontal) {
HStack {
ForEach(items) { Card($0) }
}
}Smooth and Native
Scrolling feels buttery because ScrollView uses the same engine as the rest of iOS. It just works. ✨
Quick Check
Think about which direction you want to move.
Recap
You learned that a ScrollView reveals overflowing content, scrolls vertically by default, and goes horizontal with an axis. 🎉
Frequently asked questions
Is the “Horizontal & Vertical ScrollView” lesson free?
Yes — the full text of “Horizontal & Vertical ScrollView” is free to read here on the web, and the SwiftUI Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the SwiftUI Academy course, upgrade to CoddyKit PRO.
What will I learn in “Horizontal & Vertical ScrollView”?
Scroll arbitrary content in any direction. You practise SwiftUI Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start SwiftUI Academy?
No prior experience is required. SwiftUI Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 1 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “Horizontal & Vertical ScrollView” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this SwiftUI Academy lesson?
Yes. Every SwiftUI Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- Horizontal & Vertical ScrollView
- LazyVStack & LazyHStack
- Adaptive Grids with LazyVGrid
- ScrollView Reader & Anchors