SwiftUI ScrollView: Building Dynamic and Interactive Interfaces

SwiftUI ScrollView is a powerful container view provided by Apple’s SwiftUI framework for creating scrollable user interfaces in iOS, macOS, watchOS, and tvOS applications. It allows users to scroll through views that exceed the screen’s boundaries, providing a seamless and interactive scrolling experience.

The ScrollView automatically adjusts its content size based on the views it contains, enabling the user to scroll vertically or horizontally through the content. It handles various complexities, such as dynamic content heights, nested scroll views, and lazy loading, making it a versatile tool for building dynamic and interactive user interfaces.

SwiftUI ScrollView example

Let’s start by creating ScrollView in SwiftUI and creating a vertically scrollable list of numbers.

1. Create a ScrollView that contains a VStack

2. Inside the VStack, we use a ForEach loop to iterate over 20 numbers.

3. For each number, we display a Text view with the label “Number: “followed by the current number.

import SwiftUI

struct ScrollViewTest: View {
    var body: some View {
        ScrollView {
            VStack {
                ForEach(0..<20) { number in
                    Text("Number: \(number)")
                        .font(.title)
                        .padding()
                }
            }
        }
    }
}

struct ScrollViewTest_Previews: PreviewProvider {
    static var previews: some View {
        ScrollViewTest()
    }
}

Result:

SwiftUI ScrollView horizontal scroll

If you want to horizontal you use the modifier called .horizontal and change the VStack to a HStack.

Here we are modifying the example above to scroll horizontally instead of vertically: 

import SwiftUI

struct ScrollViewTest: View {
    var body: some View {
        ScrollView(.horizontal) { //<-- Add .horizontal
            HStack { //<-- Change from VStack to HStack‰‰
                ForEach(0..<20) { number in
                    Text("Number: \(number)")
                        .font(.title)
                        .padding()
                }
            }
        }
    }
}

struct ScrollViewTest_Previews: PreviewProvider {
    static var previews: some View {
        ScrollViewTest()
    }
}

Result:

How do I turn off scroll in ScrollView?

If you want to disable the ability to scroll you can easily use the modifier called .scrollDisabled.

By passing true as the argument, scrolling is turned off and users won’t be able to scroll through the content in the ScrollView.

import SwiftUI

struct ScrollViewTest: View {
    
    var body: some View {
        ScrollView() {
            VStack {
                ForEach(0..<20) { number in
                    Text("Number: \(number)")
                        .font(.title)
                        .padding()
                }
            }
        }
        .scrollDisabled(true) //<-- Disable scroll
    }
}

Keep in mind that disabling scrolling may affect user interaction and accessibility, so consider the impact on the overall user experience before disabling scroll functionality entirely.

How To Hide Scrollbar In ScrollView

To hide the scrollbar, you have a couple of options. The first and easiest way is to use showsIndicators when you create your scrollview:

ScrollView(showsIndicators: false)

But if you like you can also add it after by .scrollIndicators() and use .hidden:

.scrollIndicators(.hidden)

It’s worth noting that while this approach hides the scrollbar visually, users can still scroll through the content using other input methods, such as touch gestures or keyboard arrows.

How do I disable ScrollView bounce in SwiftUI?

In order to disable bounce on your scroll view, you can simply use UIScrollView.appearance().bounces = false.

Unfortunately, there is no built-in modifier in SwfitUI you can just use.

Anyways at the top of your view, you call init() and add the following line:

UIScrollView.appearance().bounces = false

When you do that, all scrollview’s in your view, will have disabled bounce.

import SwiftUI

struct ScrollViewTest: View {
    
    init() {
        UIScrollView.appearance().bounces = false // <-- Disable bounce
    }
    
    var body: some View {
        ScrollView() {
            VStack {
                ForEach(0..<20) { number in
                    Text("Number: \(number)")
                        .font(.title)
                        .padding()
                }
            }
        }
    }
}

SwiftUI ScrollView pull to refresh

If you are developing for iOS15+ (you properly are) Apple has added a refresh action you can use by adding the .refreshable modifier:

struct ScrollViewTest: View {
    
    var body: some View {
        ScrollView(showsIndicators: false) {
            VStack {
                ForEach(0..<20) { number in
                    Text("Number: \(number)")
                        .font(.title)
                        .padding()
                }
            }
        }
        .refreshable {
            print("Pull to refresh")
        }
    }
}

Conclusion

SwiftUI ScrollView is a versatile and powerful tool for creating dynamic and interactive user interfaces in iOS, macOS, watchOS, and tvOS applications. Its ability to handle both vertical and horizontal scrolling, along with automatic adjustment of content size, makes it a valuable component for building engaging experiences.

Using SwiftUI ScrollView provides several benefits:

  1. Seamless Scrolling: ScrollView offers smooth and seamless scrolling for content that exceeds the visible screen area. Users can effortlessly navigate through large sets of data or lengthy content, enhancing the overall user experience.
  2. Dynamic Content Handling: ScrollView adapts to the height and width of the contained views, allowing for dynamic content presentation. This flexibility enables developers to create interfaces with varying item sizes, accommodating diverse content requirements.
  3. Performance Optimization: For handling large datasets or dynamic content, ScrollView can be combined with LazyVStack or LazyHStack, enabling lazy loading and rendering only the visible content. This optimization improves memory usage and scroll performance, resulting in faster and more efficient user interfaces.

Overall, SwiftUI ScrollView simplifies the creation of scrollable interfaces, offering a powerful and flexible solution for presenting content that extends beyond the visible screen area. Its seamless scrolling, dynamic content handling, performance optimization, customizability, and cross-platform compatibility make it an essential component for building intuitive and engaging user interfaces in SwiftUI-based applications.

Scroll to Top