How to make lists in a TabView scroll with the main ScrollView in SwiftUI?

Question

So basically I have a view whose structure looks like this:

ScrollView {
    VStack {
        VStack {...}
        TabView {
            ScrollView(.vertical, showsIndicators: false) {
                ForEach(1...300, id: \.self) { index in
                    Text("\(text) \(index)")
                        .frame(maxWidth: .infinity, minHeight: 50)
                        .background(backgroundColor)
                }
            }
            // Other placeholder tabs
        }
    }
}

The issue with this is that the main ScrollView and the ScrollView within the tabview are separate and therefore scroll independent of one another. What I'd ultimately like to achieve is the profile layout like TikTok where the main ScrollView and the content of the TabView scroll together however I cannot figure out how because I'm new to SwiftUI.

Edit:

As requested, here is the video of what I am trying to achieve. Basically the entire page is one ScrollView but theres also a ScrollView within the TabView and they scroll together until the Tabs are at the top of the page when the inner ScrollView takes control:

Thank you!

Answer 1

Thank you for adding the video:)

What you are looking for is called Sticky header

Sticky headers (or persistent headers) are a common pattern for keeping the header of a website or app in the same place on the screen while the user scrolls down the page. A version of this pattern is the partially sticky header, which (re)appears at the top of the page as soon as the user starts scrolling up.

I have found two tutorials that I believe will help you:

SwiftUI Animated Sticky Header & Instagram Profile Sticky Header

Good luck