How to disable vertical scroll in TabView with SwiftUI?

Question

I have set up a TabView in my application, so that I can swipe horizontally between multiple pages, but I also have an unwanted vertical scroll that may appear, with a bounce effect so. How can I disable this vertical scroll?

My code:


struct ContentView: View {
  @State private var currentTabIndex: Double = 0

  var body: some View {
    VStack {
      TabView(selection: $currentTabIndex) {
        Text("Text n°1")
          .tag(0)
        
        Text("Text n°2")
          .tag(1)
      }
      .border(Color.black)
      .tabViewStyle(PageTabViewStyle(indexDisplayMode: .never))
    }
  }
}

Looks like a bug or something that can not be changed at the moment. Offtopic: but you have to use Double in your tag aswell, if you specify currentTabIndex as Double. — davidev
– davidev, Commented Sep 27, 2020 at 18:18

nicksarno · Accepted Answer · 2020-09-27 19:01:37Z

16

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.

answered Sep 27, 2020 at 19:01

nicksarno

4,2851 gold badge19 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Duc Over a year ago

Thanks for this! In my case the contents are definitely smaller than the TabView frame, so you do have any insight into why it scrolls in the first place?

nicksarno Over a year ago

I also wish it didn't haha. It seems like each tab is based on a ScrollView, which is probably done so that in situations where the content IS larger than the TabView frame, the user can scroll on it (just my guess, idrk).

Erik Over a year ago

Is there any other solution? I would like to keep the bouncing function, but only deactivate the vertically scroll function for the tabview

nicksarno Over a year ago

@Erik I haven't found any other native solution, however, I've played around with this SwiftUI Pager project (not affiliated) instead of the paging tab view, and it works pretty well.

Abhishek Thapliyal Over a year ago

Not working for me so i did like this UIScrollView.appearance().isScrollEnabled = false

valvoline · Accepted Answer · 2021-03-26 13:49:45Z

8

Still an issue with Xcode 12.4.

I managed to workaround that by wrapping the TabView within a ScrollView and using the alwaysBounceVertical property set to false, as follow:

ScrollView(.horizontal) {
    TabView {
        ///your content goes here
    }
    .tabViewStyle(PageTabViewStyle())
}
.onAppear(perform: {
    UIScrollView.appearance().alwaysBounceVertical = false
})
.onDisappear(perform: {
    UIScrollView.appearance().alwaysBounceVertical = true
})

edited Mar 26, 2021 at 13:49

answered Mar 26, 2021 at 13:28

valvoline

8,1573 gold badges51 silver badges53 bronze badges

1 Comment

herve Over a year ago

With UIScrollView.appearance().bounces = false and UIScrollView.appearance().bounces = true it worked for me.

B. Tkachuk · Accepted Answer · 2025-02-22 09:36:11Z

2

iOS 18+, Project build Xcode 16 only.

Had the same issue with but with TabView horizontal scrolling(the solution is not axis-specific).

Put on TabView highPriorityGesture DragGesture:

.highPriorityGesture(DragGesture())

And if you want to control scroll availability you can go with:

.highPriorityGesture(DragGesture(), isEnabled: isTabViewScrollable)

You should mention that it can conflict with another gesture, which you could have on TabView.

edited Feb 22 at 9:36

answered Feb 21 at 18:14

B. Tkachuk

211 silver badge2 bronze badges

Comments

DogLoaf · Accepted Answer · 2022-07-15 04:14:56Z

1

I actually came across this because I saw this effect in a tutorial but couldn’t replicate it on iOS 15.2. However, I managed to replicate it on iOS 14.4 on another simulator side by side. So I guess this behaviour is disabled or fundamentally changed in the newer iOS.

Demonstration

edited Jul 15, 2022 at 4:14

answered Jul 14, 2022 at 3:19

DogLoaf

112 bronze badges

1 Comment

Steven-Carrot Over a year ago

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

Luis Ascorbe · Accepted Answer · 2024-01-22 18:01:28Z

1

the real problem if your paged horizontal scroll view bounces vertically is its vertical content size is bigger than the scroll view's frame. If you take care of this it won't bounce vertically.

that said, the problem of touching appearance is it affects all the UIScrollViews of the app (if not contained).

a better way to work around this (if you really need to) is using Introspect:

.introspect(.scrollView, on: .iOS(.v17)) { scrollView in
    scrollView.alwaysBounceVertical = false
}

answered Jan 22, 2024 at 18:01

Luis Ascorbe

2,1191 gold badge23 silver badges38 bronze badges

Collectives™ on Stack Overflow

How to disable vertical scroll in TabView with SwiftUI?

5 Answers 5

5 Comments

1 Comment

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

5 Comments

1 Comment

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related