Is there a way to hide scroll indicators in a SwiftUI List?

Viewed 15761

I want to create a SwiftUI List, but not show scroll indicators. ScrollView offers showsIndicators to do this. How can it be done?

5 Answers

Any Indicators (List, scrollView, etc.)

you can get rid of showing indicators for all Lists, but with an API of the UITableView. because SwiftUI List is using UITableView for iOS behind the scene:

struct ContentView: View {
    
    init() {
        UITableView.appearance().showsVerticalScrollIndicator = false
    }
    
    var body: some View {
        List(0...100, id: \.self) { item  in
            Text("hey")
        }
    }
}

Note that this will eliminate all TableViews and Lists indicators. You should make it visible again if you need to.


⚠️ Not Yet Important Note

Seems like Apple is removing appearance hacks (but not for this one yet). So you can use LazyVStack inside and ScrollView instead of List and use the available argument for hiding the indicators.

struct ContentView: View {
    var body: some View {
        ScrollView(.vertical, showsIndicators: false) { // <- This argument
            LazyVStack {
                ForEach(1...100, id: \.self) {
                    Text("\($0)").frame(height: 40)
                }
            }
        }
    }
}

It is actually easy to accomplish this without any appearance work arounds in the answer accepted. You just have to use the ScrollView initializer and set the parameter showsIndicators to false.

ScrollView(.vertical, showsIndicators: false) {
     // ... your content for scrollView
}

Inside your ScrollView you could use LazyVStack, if you have a lot of subviews to scroll through. SwiftUI will then render very efficiently your subviews: "lazy" -> only if needed).

Until there is a native SwiftUI way to achieve this, the Introspect library provides a decent solution.

After applying all modifiers to your list just add as a last modifier the following:

List {
  ...
}
.introspectTableView { tableView in
  tableView.showsVerticalScrollIndicator = false // here you can access any other UITableView property
}

I hope there is a native way to do that at some point.

List basically creates a tableview (UpdateCoalescingTableView) behind the scenes, and tableview's are scrollable. Unfortunately, however, you can't get to the scrollview attributes in SwiftUI.

You "might" be able to create a UIViewRepresentable that could walk up the view hierarchy until it finds a scrollview, but I wouldn't recommend it.

You could also create your own scrollview, put a vstack inside it, and "fake" a list view, which would probably be the safer approach.

swift scrollview hide scrollbar

scrollView.showsHorizontalScrollIndicator = false 
scrollView.showsVerticalScrollIndicator = false

hide scroll view indicators bar swiftui

ScrollView(.vertical, showsIndicators: false) {
     // ... your content for scrollView
}
Related