How to let touch events pass through to view below ScrollView

I am trying to place a map under another view, so that it can be revealed by scrolling the view on top up. This gif should demonstrate:

This implementation is done with a spacer below the actual content:

var body: some View {
        ZStack {
            //i want to tap this view...
            BackgroundMapCONTENTVIEW()
                .onTapGesture {
                    print("i wish i could be tapped")
                }
            //...but this ScrollView is getting all the user input
            GeometryReader { proxy in
                ScrollView {
                    ZStack {
                        Rectangle()
                            .accentColor(Color.white)
                            .foregroundColor(Color.white)
                            .frame(width: proxy.size.width, height: proxy.size.height, alignment: .top)
                            .allowsHitTesting(false)
                        CompassCONTENTVIEW()
                            .frame(width: proxy.size.width, height: proxy.size.height, alignment: .top)
                    }
                    Spacer()
                        .frame(height: 450.0)
                        .opacity(0.0)
                        .disabled(true)
                        .allowsHitTesting(false)
                }
            }
        }
    }

As you can see I have tried .allowsHitTesting(false) and .disabled(true). But the ScrollView is currently getting all the touch events. What do I do?