Greetings, traveler!

Apple’s iOS 26 introduces the scrollEdgeEffectStyle modifier in SwiftUI, which allows developers to customize the appearance of content transitions at the edges of a scroll view. This article explains the ScrollEdgeEffectStyle options and provides an example of how to implement the modifier in a SwiftUI application.

Overview of scrollEdgeEffectStyle

The scrollEdgeEffectStyle modifier defines the visual style of a scroll view’s edges, controlling how content appears as it approaches the top or bottom boundaries. The modifier takes a ScrollEdgeEffectStyle parameter and an optional ScrollEdge parameter to specify which edges are affected. The ScrollEdgeEffectStyle type offers three static properties:

• automatic: Applies a platform-specific default style for edge transitions.
• hard: Creates a sharp cutoff with a dividing line at the scroll view’s edge.
• soft: Produces a gradual, faded transition at the scroll view’s edge.

These options enable developers to adjust the scroll view’s edge behavior to suit the application’s design requirements.

Implementing scrollEdgeEffectStyle

The scrollEdgeEffectStyle modifier is applied to a ScrollView to specify the edge transition style. The following example demonstrates its use within a TabView, where a scrollable list employs a soft edge effect:

import SwiftUI

struct ContentView: View {
    var body: some View {
        TabView {
            Tab("Tab 1", systemImage: "text.bubble") {
                content
            }
            
            Tab("Tab 2", systemImage: "heart") {
                content
            }
            
            Tab("Tab 3", systemImage: "gear") {
                content
            }
        }
        .tabBarMinimizeBehavior(.onScrollDown)
    }
    
    private var content: some View {
        ScrollView {
            LazyVStack {
                ForEach(0...100, id: \.self) { id in
                    Text(id.description)
                        .frame(maxWidth: .infinity, alignment: .leading)
                        .padding()
                        .background(.gray.opacity(0.5), in: .capsule)
                        .padding()
                }
            }
        }
        .scrollEdgeEffectStyle(.soft, for: .all)
    }
}

#Preview {
    ContentView()
}

In this example, the TabView contains three tabs, each displaying a scrollable list of items. The ScrollView uses the .soft style for both top and bottom edges, specified by .all. As the user scrolls, content fades gradually at the edges, creating a smooth transition. The tabBarMinimizeBehavior(.onScrollDown) modifier complements this by minimizing the tab bar during downward scrolling, maximizing content visibility to demonstrate an effect of the scrollEdgeEffectStyle modifier.

Conclusion

The scrollEdgeEffectStyle modifier provides a way to customize scroll view edge transitions in SwiftUI, offering control over the visual presentation of content boundaries. By selecting an appropriate style, developers can tailor the scrolling experience to meet the design and functional requirements of their applications.