How it works
ScrollEdgeEffectStyle describes how SwiftUI treats content as it meets the boundary of a scroll view, letting you choose between a hard cutoff, a soft fade, or a hardened edge that visually grounds the content against an adjacent surface such as a toolbar or navigation bar. By default a scroll view clips its content flush against its edges; this type gives you a vocabulary for softening or reinforcing that transition so scrolling content reads correctly beneath translucent bars and other layered chrome. Reach for it when the standard edge treatment looks abrupt against your layout, or when you need the edge effect to match the material and depth of the surrounding interface.
Choose a style from the built-in constants
ScrollEdgeEffectStyle exposes its behaviors as static members rather than something you construct field by field. You pick one of the predefined cases to declare the look you want at the edge; the example selects
.soft, which feathers the content into a gentle fade as it reaches the boundary instead of cutting it off.Apply it with the scrollEdgeEffectStyle(_:for:) modifier
You attach a ScrollEdgeEffectStyle to a scroll view through the
scrollEdgeEffectStyle(_:for:)modifier, which takes the style as its first argument and the edge it governs as the second. In the example this modifier sits directly on theScrollView, binding the chosen style to that view's scrolling content.Target a specific edge
The effect is scoped per edge, so the modifier's
for:parameter names where it applies. Here the style is bound to.top, meaning only the top boundary of theScrollViewreceives the soft treatment while the other edges keep their default behavior — useful when content needs to settle gracefully under a top bar but not elsewhere.Let it act on the scroll view's content
Once applied, ScrollEdgeEffectStyle operates on whatever scrolls within the view as it crosses the targeted edge, with no further wiring required on the content itself. The rows inside the
VStack— and any other content theScrollViewholds — pass through the configured top effect automatically as the user scrolls.
.soft to .hard in .scrollEdgeEffectStyle(.soft, for: .top) and scroll the rows under the top edge to see the fade replaced by a crisp, clipped boundary.Example & preview
Press Run live & edit to compile it in your browser — then edit the Swift on the left and the preview re-renders live.
struct ScrollEdgeEffectStyleDemo: View {
var body: some View {
ScrollView {
VStack(spacing: 12) {
ForEach(0..<12) { i in
Text("Row \(i + 1)")
.frame(maxWidth: .infinity)
.padding()
.background(.blue.opacity(0.15))
.clipShape(.rect(cornerRadius: 8))
}
}
.padding()
}
.scrollEdgeEffectStyle(.soft, for: .top)
}
}