Disable scrolling in ScrollView and List in SwiftUI

In this tutorial, we will see how to disable scrolling in ScrollView and List in SwiftUI.

We can control scrolling behavior in ScrollView and List views using the disabled() modifier. This modifier makes a view non-interactive, preventing user interactions such as scrolling.

In the iOS 16 and above versions, we can use the scrollDisabled() modifier instead of the disabled() modifier to prevent scrolling.

Now, follow the approaches below to achieve this task.

Using the disabled() modifier

We can use the disabled() modifier to make a view non-interactive. When we apply this modifier to a view, it disables user interactions with that view such as scrolling, taps, gestures, etc.

Disable scrolling in ScrollView

First of all, I will create ScrollView and then apply the .disabled(true) modifier to the ScrollView to dismiss the scroll.

Example

import SwiftUI

struct ContentView: View {
    var body: some View {
        ScrollView  {
            VStack (spacing: 30) {
                ForEach(1..<25) { index in
                   Text("Text \(index)")
                }
            }
        }
        
        // To disable scrolling
        .disabled(true)
    }
}

In the above program, I have applied the .disabled(true) modifier on the ScrollView, so we are not able to scroll the ScrollView anymore.

Output:

Disable scrolling in List

Similarly, we can also disable the scroll behavior of a List by applying the disable() modifier to the List view.

Now, I will create a List and simply apply the .disable(true) modifier to the List to dismiss the scroll.

Example

import SwiftUI

struct ContentView: View {
    var body: some View {
        List(1..<25) { index in
            Text("Text \(index)")
        }
        
        // To disable scrolling
        .disabled(true)
    }
}

In the above program, I have applied the .disabled(true) modifier to the List to disable scrolling of the list.

Output:

Using the scrollDisabled() modifier

In the iOS 16 and above versions, We can simply disable scrolling of a view by using the scrollDisabled() modifier. This is specifically used to disable scrolling in views.

This modifier only prevents the view from being scrolled by the user, but it does not disable other interactions within the view, such as tapping on elements.

Disable scrolling in ScrollView

Simply apply the .scrollDisabled(true) modifier on the ScrollView to dismiss the scroll behavior.

Example

import SwiftUI

struct ContentView: View {
    var body: some View {
        ScrollView  {
            VStack (spacing: 30) {
                ForEach(1..<25) { index in
                   Text("Text \(index)")
                }
            }
        }
        
        // To disable scrolling
        .scrollDisabled(true)
    }
}

Output:

Disable scrolling in List

Similarly, apply the .scrollDisabled(true) modifier on the List to dismiss the scroll behavior.

Example

import SwiftUI

struct ContentView: View {
    var body: some View {
        List(1..<25) { index in
            Text("Text \(index)")
        }
        
        // To disable scrolling
        .scrollDisabled(true)
    }
}

Output:

Create a toggle button to disable or enable scrolling

We can also create a toggle button that will enable or disable scrolling based on user interaction. That means when we turn on the toggle the scrolling will be enabled, and when we turn off the toggle the scrolling will be disabled.

First of all, I will define a state variable using the @State property to track the scrolling state, then I will create a toggle button and bind the state to the Toggle to control its state.

Example

import SwiftUI

struct ContentView: View {
    
    // State variable to track whether scrolling is enabled or not
    @State private var enableScrolling = true

    var body: some View {
        VStack {
            
            // Toggle button to enable/disable scrolling
            Toggle("Enable Scrolling", isOn: $enableScrolling)
                .font(.title)
                .padding()
            
            // ScrollView containing a VStack with dynamically generated Text views
            ScrollView  {
                VStack (spacing: 30) {
                    ForEach(1..<25) { index in
                       Text("Text \(index)")
                    }
                }
            }
            // Disabling scrolling of the ScrollView based on the state of enableScrolling
            .scrollDisabled(!enableScrolling)
        }
        
    }
}

In the above code, I have used the  .scrollDisabled modifier on the ScrollView to conditionally disable scrolling based on the value of the enableScrolling state variable.

Output:

You can hide the scroll indicator by applying the .scrollIndicators(.hidden) modifier on ScrollView.