How to Disable Vertical Scroll in Tabview with Swiftui

How to disable vertical scroll in TabView with SwiftUI?

I had this same problem. It's not an exact solution, but you can turn off bouncing on scrollviews (which is used within a TabView). And as long as the items within the TabView are not larger than the TabView frame, it should act as if you disabled vertical scrolling.

I would call it either .onAppear or in your init function:

.onAppear(perform: {
   UIScrollView.appearance().bounces = false
 })

Note: this disables the bouncing on ALL scrollviews across your app... So you may want to re-enable it .onDisappear.

Stop vertical scroll in SwiftUI ScrollView

If ScrollView's height is less than the content's height it will scroll vertically too.

Just make it higher or the content narrower.

Set SwiftUI PageTabViewStyle vertical flow direction in TabView

I found an efficient way to obtain this, inspired by Ernist answer.

GeometryReader { proxy in
    TabView(selection: selection) {
        everyView
            .frame(width: proxy.size.width, height: proxy.size.height)
            .rotationEffect(.degrees(-90))
            .rotation3DEffect(flippingAngle, axis: (x: 1, y: 0, z: 0))
    }
    .frame(width: proxy.size.height, height: proxy.size.width)
    .rotation3DEffect(flippingAngle, axis: (x: 1, y: 0, z: 0))
    .rotationEffect(.degrees(90), anchor: .topLeading)
    .offset(x: proxy.size.width)
}.tabViewStyle(PageTabViewStyle())

I have also built a swift package (VerticalTabView ) that gives the possibility to wrap all that code in this:

VTabView {
    everyView
}.tabViewStyle(PageTabViewStyle())

Disable the scrolling but not the content (iOS 13 and higher)

Don't forget to provide a minimum reproducible example something we can copy and paste to ensure that the integrity if what you want is kept.

If your *StepView.count is static the code below might work for you

struct ButtonScroll: View {
    @State var myId: Int = 0
    
    init() {
        //Add this
        //It does NOT work with ScrollView
        UIScrollView.appearance().isScrollEnabled = false
    }
    var body: some View {
        VStack{
            //Simulates myId changing
            Button("change-position", action: {
                myId = Int.random(in: 0...3)
                print(myId.description)
            })
            ZStack{
                //TabView does not allow for changes in Tab/Page count nicely
                TabView(selection: $myId){
                    //Used Button to test interaction
                    Button("FirstStepView", action: {
                        print("FirstStepView")
                    }).tag(0)
                    Button("SecondStepView", action: {
                        print("SecondStepView")
                    }).tag(1)
                    Button("ThirdStepView", action: {
                        print("ThirdStepView")
                    }).tag(2)
                    Button("FourthStepView", action: {
                        print("FourthStepView")
                    }).tag(3)
                }.tabViewStyle(PageTabViewStyle(indexDisplayMode: .never))
                .animation(
                    Animation.easeOut(duration: 1)
                )
            }
        }
    }
}

How to stop the page from being able to be scrolled up and down while using a paged tab view in swiftUI

You can do that like this

Put TabView inside the ScrollView with .onAppear()

.onAppear(perform: {
            UIScrollView.appearance().alwaysBounceVertical = false
})  

---

struct ContentView: View {
    var body: some View {
        ScrollView(.vertical, showsIndicators: false) {
            TabView {
                Text("Saturday")
                Text("Sunday")
                Text("Monday")
                Text("Tuesday")
                Text("Wednesday")
                Text("Thursday")
                Text("Friday")
            }
            .tabViewStyle(PageTabViewStyle())
            .frame(width: 300, height: 600, alignment: .center)
        }
        .frame(width: 300, height: 600, alignment: .center)
        .background(Color.blue)
        .onAppear(perform: {
            UIScrollView.appearance().alwaysBounceVertical = false
        })
    }
}

---

---

Related Topics