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.

This needs a [Minimal, Reproducible Example (MRE)](https://stackoverflow.com/help/minimal-reproducible-example). You left your parameter declaration off, so we have no idea how much your `height` is. — Yrb, Feb 11 '22 at 16:25
@Yrb I have edited the question above, it is the height of the scrollview area from geometryreader — Ryan Fung, Feb 11 '22 at 16:34

score 3 · Accepted Answer · answered Feb 11 '22 at 16:59

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
    }
}

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

1 Answers1