Why SwiftUI ScrollView not working properly?

Question

Everything in this view works fine except that my scrollview does not scroll to bottom and bounces back towards up.

This the screenshot below, I'm not able to add video of the view but I am sharing the code and screenshot of the view.

enter image description here

import SwiftUI
import AVKit

struct Servicer_rental_form7: View {
    
    @State var isLinkActive = false
    @State var shouldShowImagePicker = false
    @State var avatarImage = UIImage(systemName: "photo.on.rectangle.angled")!
    private let player = AVPlayer(url: URL(string: "YOUR-URL.mp4")!)
    @State var isChecked:Bool = false
    func toggle(){isChecked = !isChecked}
    @State var isLinkActive1 = false
    
    var body: some View {
        ZStack{
            ScrollView(.vertical, showsIndicators: false) {
                VStack{
                    Text("Upload Images")
                        .offset(x:-getReact().width/3.5,y: getSafearea().bottom + 10)
                        .font(.system(size: 22,weight: .semibold,design: .default))
                    Button( action: {
                        shouldShowImagePicker = true
                    }, label: {

                        Image( systemName: "camera")
                            .foregroundColor(Color("YellowAccent"))
                            .offset(x:-getReact().width/10)

                        Text("Upload Image").underline()
                            .foregroundColor(Color.black)
                            .offset(x:-getReact().width/10)
                            .overlay(
                                RoundedRectangle(cornerRadius: 10)
                                    .stroke(Color("YellowAccent"), lineWidth: 2)
                                    .frame(width:380, height: 60)
                                 .offset(x: getReact().width/40, y: getSafearea().bottom + -35)
                            )
                    })
                    .offset(x: -getReact().width/19, y: getSafearea().bottom + 50)
                    
                    Image(uiImage: avatarImage)
                        .resizable()
                        .frame(width: 380, height:290)
                        .padding(.all)
                        .offset(y: getSafearea().bottom + -150)
                    .overlay(
                        RoundedRectangle(cornerRadius: 10)
                            .stroke(Color.gray, lineWidth: 3)
                            .frame(width: 380, height:300)
                            .offset(x: 5,y: getSafearea().bottom + -155)
                    )
                    .offset(x: 5,y: getSafearea().bottom + 180)
                        
                    Text("Upload 3D Floor Plans")
                        .offset(x:-getReact().width/5.5,y: getSafearea().bottom + 50)
                        .font(.system(size: 22,weight: .semibold,design: .default))
                    Button( action: {
                        shouldShowImagePicker = true
                    }, label: {

                        Image( systemName: "camera")
                            .foregroundColor(Color("YellowAccent"))
                            .offset(x:-getReact().width/10)

                        Text("Upload Image").underline()
                            .foregroundColor(Color.black)
                            .offset(x:-getReact().width/10)
                            .overlay(
                                RoundedRectangle(cornerRadius: 10)
                                    .stroke(Color("YellowAccent"), lineWidth: 2)
                                    .frame(width:380, height: 60)
                                 .offset(x: getReact().width/40, y: getSafearea().bottom + -35)
                            )
                    })
                    .offset(x: -getReact().width/19, y: getSafearea().bottom + 80)

                    Text("Upload Video")
                        .offset(x:-getReact().width/3.75,y: getSafearea().bottom + 110)
                        .font(.system(size: 22,weight: .semibold,design: .default))
                    Button( action: {
                       // shouldShowImagePicker = true
                    }, label: {

                        Image( systemName: "camera")
                            .foregroundColor(Color("YellowAccent"))
                            .offset(x:-getReact().width/10)

                        Text("Upload Video").underline()
                            .foregroundColor(Color.black)
                            .offset(x:-getReact().width/10)
                            .overlay(
                                RoundedRectangle(cornerRadius: 10)
                                    .stroke(Color("YellowAccent"), lineWidth: 2)
                                    .frame(width:380, height: 60)
                                 .offset(x: getReact().width/40, y: getSafearea().bottom + -35)
                            )
                    })
                    .offset(x: -getReact().width/19, y: getSafearea().bottom + 140)

                    Group{
                        VideoPlayer(player: player)
                        
                            .onAppear() {
                                player.play()
                            }
                            .frame(width: 350, height: 290)
                            .cornerRadius(20)
                            .offset( y: getSafearea().bottom + 165)
                        
                        Button(action: toggle){
                            HStack{
                                Image(systemName: isChecked ? "checkmark.square.fill": "square")
                                    .foregroundColor(.green)
                                Text("I agree to terms and conditions")
                                    .foregroundColor(Color.black)
                                    .font(.system(size: 15,weight: .medium, design: .default))
                                
                            }
                            //.padding(.leading, 50)
                            
                        }//button1
                        .offset( x:-40,y: getSafearea().bottom + 165)
                        
                        Button(action: {
                            //code
                        }, label: {
                            
                            HStack{
                                Image("flashLane 1")
                                Text("Flash Lane")
                                    .bold()
                            }
                            .frame(width: 140, height: 40)
                        })
                        
                        .buttonStyle(.borderedProminent)
                        .tint(.orange)
                        .offset(x: -getReact().width/4.5,y: getSafearea().bottom + 190)
                        
                        Button(action: {
                            //code
                        }, label: {
                            
                            HStack{
                                Image("REasyLane")
                                Text("R-Eazy Lane")
                                    .bold()
                            }
                            .frame(width: 140, height: 40)
                            
                        })
                        
                        .buttonStyle(.borderedProminent)
                        .tint(.purple)
                        .offset(x: getReact().width/4.5,y: getSafearea().bottom + 130)
                        
                        Button(action: {
                            //action
                            isLinkActive1 = true
                        }) {
                            Text("Publish")
                                .foregroundColor(Color.white)
                                .fontWeight(.bold)
                                .frame (width: 330, height: 20)
                                .padding()
                                .background(Color("YellowAccent"))
                                .cornerRadius(10)
                            
                                .shadow(color: .gray, radius: 5, x: 0, y: 4)
                        }
                        .offset(x: 6,y: getSafearea().bottom + 140)
                        .padding(.bottom)
                        
                    
                    }//grp
                    
                } //vstack
                .frame(width: getReact().width, height: getReact().height)
                .sheet(isPresented: $shouldShowImagePicker, content: {
                    ImagePicker(avatarImage: $avatarImage)  })
                 .padding(.top)
//                .background(
//                    NavigationLink(destination: Servicer_rental_form2(), isActive: $isLinkActive) {
//                        EmptyView()
//                    }
//                        .hidden()
                //)
               
            }
            
        //.frame(width: getReact().width)
        }
       // .padding(.top,-80)
        .toolbar {
            ToolbarItem(placement: .principal) {
                Text("Filter")
                    .frame(width: 300, height: 10)
                    .foregroundColor(Color.black)
                    .font(.system(size: 30,weight: .medium, design: .default))
            }
        }
        
    }
}

struct Servicer_rental_form7_Previews: PreviewProvider {
    static var previews: some View {
        Servicer_rental_form7()
    }
}

Note: getReact() and getSafearea() are methods I have made separately for sizing of components and removing or adding them does not affect scrollview issue.

Answer 1

There is some issue with offset or getReact/getSafeArea. I ran your code by removing offset, and it's working fine at my end.