How can I use SwiftUI ScrollView to scroll beyond the ScrollView frame, to allow the scrolling content to display under header/foot views?

Viewed 573

I have a header and foot on a ZStack and in the middle I have a ScrollView with content. This keeps the indicators visible in the middle portion, however it also means that the content inside the ScrollView does not extend to the header and footer, as seen in many apps with a blur effect. Is there any way currently to have the ScrollView extend its content beyond its frame?

import SwiftUI




struct ContentView: View {

    var fullyUnder: some View {
        ZStack {
            ScrollView(.vertical, showsIndicators: true) {
                VStack {
                    ForEach(0..<50) { _ in
                        Rectangle().foregroundColor(Color.red).frame(width: 50, height: 50)
                    }
                }
            }

            VStack {
                Color.green.opacity(0.50).frame(height: 30)
                Spacer()
                Color.blue.opacity(0.50).frame(height: 30)
            }


        }
    }

    var fullyIn: some View {
        VStack {
            Color.green.opacity(0.50).frame(height: 30)

            ScrollView(.vertical, showsIndicators: true) {
                VStack {
                    ForEach(0..<50) { _ in
                        Rectangle().foregroundColor(Color.red).frame(width: 50, height: 50)
                    }
                }
            }

            Color.blue.opacity(0.50).frame(height: 30)

        }
    }


    var body: some View {
        VStack {

            // This shows the content under the header/footer but the indicator also goes under
            fullyUnder

            Divider()

            // This shows the indicator properly, but the content doesn't go udner the header/footer
            fullyIn

        }
    }


}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}
0 Answers
Related