Add horizontal and vertical scrolling using ScrollView in SwiftUI

In this tutorial, we will see how to add horizontal and vertical scrolling using ScrollView in SwiftUI.

Horizontal and vertical scrolling are methods used to navigate content that extends beyond the visible area of a screen, allowing users to view hidden or off-screen portions of the content.

When we scroll vertically, we move the content up and down to see what is above or below the screen. When we scroll horizontally, we move the content left and right. It is helpful for wide images or spreadsheets.

This article will cover the topics mentioned below

• Horizontal scrolling
• Vertical scrolling
• Scrolling horizontally and vertically

Now, I am going to explore the above-mentioned topics one by one

Horizontal scrolling

In SwiftUI, we can enable horizontal scrolling by using the ScrollView view and specify its axis as .horizontal. This configuration allows us to create a scrollable container that arranges content horizontally, letting users swipe or scroll left and right to navigate through the content.

Example

import SwiftUI

struct ContentView: View {
    var body: some View {
        ScrollView(.horizontal) {
            // This is the vertical scrollable content
            HStack {
                ForEach(1...10, id: \.self) { index in
                    Text("Column \(index)")
                        .frame(width: 200, height: 200)
                        .background(Color.mint)
                        .cornerRadius(10)
                }
                .padding()
            }
        }
    }
}

In the above program, I have created a ScrollView with a horizontal axis by passing .horizontal to the ScrollView View.

Inside the ScrollView, I have used an HStack to arrange a series of Text views horizontally. We can replace the Text views with any other views or content that we want to display in our horizontal scroll view.

Then, each item in the HStack is given a fixed width and height, and the content is wrapped in a mint colored background with some corner radius to make it visually appealing.

Output:

Vertical scrolling

Similarly, we can enable vertical scrolling by specifying .vertical as the axis to the ScrollView. This configuration enables the creation of a scrollable container that organizes content vertically, allowing users to scroll up and down to navigate through the content.

Example

import SwiftUI

struct ContentView: View {
    var body: some View {
        ScrollView(.vertical) {
            // This is the vertical scrollable content
            VStack {
                ForEach(1...10, id: \.self) { index in
                    Text("Row \(index)")
                        .frame(width: 200, height: 200)
                        .background(Color.mint)
                        .cornerRadius(10)
                }
                .padding()
            }
        }
    }
}

In the above program, I have created a vertical-scrolling ScrollView by specifying .vertical as the axis for the ScrollView view.

Then, Within the ScrollView, I have used a VStack to vertically arrange a series of Text views using the ForEach loop.

Output:

We can disable the scroll indicator (the line showing in the ScrollView) by setting the showsIndicators parameter to false to the ScrollView like below.

ScrollView(.vertical, showsIndicators: false)

The above code will hide the scroll indicator on the side of the vertical ScrollView.

Scrolling horizontally and vertically

Now, if we want to add both horizontal and vertical scrolling, we can nest ScrollView views within each other.

That means we can place one ScrollView within another. The outer ScrollView will handle vertical scrolling, while the inner one will manage horizontal scrolling.

This nesting arrangement will enable users to scroll both vertically and horizontally to navigate through the content.

Example

import SwiftUI

struct ContentView: View {
    var body: some View {
        ScrollView(.vertical) {
            VStack {
                ForEach(1...5, id: \.self) { _ in
                    ScrollView(.horizontal) {
                        HStack {
                            ForEach(1...5, id: \.self) { _ in
                                Text("Item")
                                    .frame(width: 200, height: 200)
                                    .background(.mint)
                                    .cornerRadius(10)
                            }
                        }
                    }
                }
            }
            .padding()
        }
    }
}

In the above program, I have created a vertical scroll view using ScrollView(.vertical) Inside this view to make the content scroll vertically.

Inside the vertical scroll view, I have used a VStack, which stacks its child views vertically.

Within the VStack, I have used a ForEach loop to create five horizontal scroll views, each representing a row of items.

In each horizontal scroll view (ScrollView(.horizontal)), I have used an HStack, which stacks its child views horizontally. This represents a row of “Item” elements.

Inside the HStack, I used another ForEach loop to create five “Item” elements. Each “Item” is a Text view with a width and height of 200, a mint background color, and rounded corners to give it a nice appearance.

Output: