How to hide scroll edge effect until scroll down

I present a view in a sheet that consists of a navigation stack and a scroll view which has a photo pushed to the top by setting .ignoresSafeArea(edges: .top). The problem is the top of the photo is blurry due to the scroll edge effect. I would like to hide the scroll edge effect so the photo is fully visible when scrolled to the top but let the effect become visible upon scrolling down. Is that possible?

struct ContentView: View {
    @State private var showingSheet = false
    
    var body: some View {
        VStack {
            Button("Present Sheet") {
                showingSheet = true
            }
        }
        .sheet(isPresented: $showingSheet) {
            SheetView()
        }
    }
}

struct SheetView: View {
    @Environment(\.dismiss) private var dismiss
    
    var body: some View {
        NavigationStack {
            ScrollView {
                VStack {
                    Image("Photo")
                        .resizable()
                        .scaledToFill()
                }
            }
            .ignoresSafeArea(edges: .top)
            .toolbar {
                ToolbarItem(placement: .cancellationAction) {
                    Button(role: .close) {
                        dismiss()
                    }
                }
                ToolbarItem {
                    EditButton()
                }
            }
        }
    }
}

Answered by Jordan in 848646022

Found it! .scrollEdgeEffectHidden(scrollEdgeEffectHidden, for: .top) does the trick setting scrollEdgeEffectHidden via .onScrollGeometryChange(for: CGFloat.self) looking at the geometry.contentOffset.y

Accepted Answer

Found it! .scrollEdgeEffectHidden(scrollEdgeEffectHidden, for: .top) does the trick setting scrollEdgeEffectHidden via .onScrollGeometryChange(for: CGFloat.self) looking at the geometry.contentOffset.y

How to hide scroll edge effect until scroll down
 
 
Q