ScrollView in iOS Swift

Introduction

A ScrollView lets you show more content than fits on the screen by allowing the user to scroll up, down, left, or right.

When you have a long list of items that don't fit on one screen.

When you want to show a large image or map that the user can move around.

When your content size changes dynamically and might be bigger than the screen.

When you want to create a form that is taller than the device screen.

Syntax

iOS Swift

ScrollView([.vertical, .horizontal], showsIndicators: true) {
    // Your content here
}

You can choose vertical, horizontal, or both directions for scrolling.

showsIndicators controls if the scroll bars are visible.

Examples

Scrolls vertically only.

iOS Swift

ScrollView(.vertical) {
    Text("This is a long vertical list")
    // More views here
}

Scrolls horizontally only.

iOS Swift

ScrollView(.horizontal) {
    Image("wideImage")
}

Scrolls both directions without showing scroll bars.

iOS Swift

ScrollView([.vertical, .horizontal], showsIndicators: false) {
    VStack {
        Text("Scrollable content")
    }
}

Sample App

This app shows a vertical list of 30 items inside a ScrollView. You can scroll up and down to see all items.

iOS Swift

import SwiftUI

struct ContentView: View {
    var body: some View {
        ScrollView(.vertical) {
            VStack(spacing: 20) {
                ForEach(1...30, id: \.self) { number in
                    Text("Item \(number)")
                        .font(.title)
                        .frame(maxWidth: .infinity)
                        .padding()
                        .background(Color.blue.opacity(0.3))
                        .cornerRadius(8)
                }
            }
            .padding()
        }
    }
}

@main
struct MyApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
    }
}

Important Notes

ScrollView works best with flexible content sizes.

Always test scrolling on a real device or simulator to ensure smooth behavior.

Use padding inside ScrollView content to avoid content touching screen edges.

Summary

ScrollView lets users see content larger than the screen by scrolling.

You can scroll vertically, horizontally, or both.

Wrap your content inside ScrollView to enable scrolling.