Is there a way to keep rounded corners when scrolling through content vertically in scrollview

Question

Before scrolling starts, everything looks great with rounded corners displaying on the screen. The problem comes when user starts scrolling through the page, the top corners gets replaced by the content's background color (sharp corners)... Is there a way to always have my content showing as rounded corners even when user scrolls vertically?

var body : some View{
    GeometryReader { geometry in

        ZStack{
            Color(.red).cornerRadius(20).padding(.horizontal, 15).frame(height: geometry.frame.height).clipped()
            
            ScrollView(.vertical, showsIndicators: true) {
                ZStack{
                    Color(.blue).resizable().cornerRadius(20).padding(.horizontal, 15)
                    .frame(height: geometry.frame.height).clipped()
                    
                    //some contents
                }
                VStack{
                    Color(.green).resizable().cornerRadius(20).padding(.horizontal, 15)
                    .frame(height: geometry.frame.height).clipped()
                    HStack{
                        //some other content
                    }
                }
                
            }.frame(height: geometry.frame.height)
            
        }.mask(Rectangle().cornerRadius(15).frame(height: geometry.frame.height))
        //.frame(height: geometry.frame.height)
        //.clipShape(RoundedRectangle(cornerRadius: 15))
    }
}

I have tried mask/clipshape but didn't seem to work.

Answer 1

Your .mask is on the outmost edge (so also its rounded corners), but you are padding the inner views. So when you scroll it never "meets" the rounded mask shape.

Move the padding from inside to the outside, then the .mask works:

var body : some View{
    GeometryReader { geometry in
        ZStack{
            Color(.red)
                .cornerRadius(20)
//                .padding(.horizontal, 15)
                .frame(height: geometry.size.height)
            
            ScrollView(.vertical, showsIndicators: true) {
                ZStack{
                    Color(.blue)
                        .cornerRadius(20)
                        .frame(height: geometry.size.height)
                    
                    //some contents
                }
                VStack{
                    Color(.green)
                        .cornerRadius(20)
//                            .padding(.horizontal, 15)
                        .frame(height: geometry.size.height)
                    HStack{
                        //some other content
                    }
                }
            }
        }
        .mask(RoundedRectangle(cornerRadius: 15))
        .padding(.horizontal, 15)   // << padding here
    }
}