How to flash the scroll bar indicators of a ScrollView or List

About 2 min

How to flash the scroll bar indicators of a ScrollView or List 관련

SwiftUI by Example

Back to Home

How to flash the scroll bar indicators of a ScrollView or List | SwiftUI by Example

How to flash the scroll bar indicators of a ScrollView or List

Updated for Xcode 15

New in iOS 17

SwiftUI gives us the scrollIndicatorsFlash() modifier to control when the scroll indicators for a ScrollView or List should flash, which is a great way to notify your users that some part of its data has changed. This modifier comes in two forms: whether the indicators should flash when the scroll view appears, or whether they should flash when a value changes.

For example, to make a scroll view's indicators flash when it's first shown, use this:

ScrollView {
    ForEach(0..<50) { i in
        Text("Item \(i)")
            .frame(maxWidth: .infinity)
    }
}
.scrollIndicatorsFlash(onAppear: true)

Download this as an Xcode project

Alternatively, you can provide a custom value that tracks whether the indicators should be flashed. This can be any Equatable value, and whenever that value changes SwiftUI will flash the indicators.

So you could increment an integer, generate a random UUID, or simply flip a Boolean between true and false like this:

struct ContentView: View {
    @State private var exampleState = false

    var body: some View {
        VStack {
            ScrollView {
                ForEach(0..<50) { i in
                    Text("Item \(i)")
                        .frame(maxWidth: .infinity)
                        .background(.blue)
                        .foregroundStyle(.white)
                }
            }
            .scrollIndicatorsFlash(trigger: exampleState)

            Button("Flash!") {
                exampleState.toggle()
            }
        }
    }
}