Scroll View Items Come Over the Navigation Bar in SwiftUI

Question

I made a custom nav bar. and added a scroll view below it. The problem I am getting is when I scroll down, the data inside scroll view comes over the navigation bar. Here is the screenshot:

My code is:

struct NewsfeedView: View {
    
    var newsfeedModel: [NewsFeedData]
    
    var body: some View {
        
        VStack {
            
            CustomNavBar(navTitle: "Newsfeed")
            
            ScrollView {
                LazyVStack{
                    ForEach(newsfeedModel) { modelData in
                         
                        NewsFeedTableViewCell(newsFedd: modelData)
          }
        }
      }
    }.ignoresSafeArea()
  }
}

Does anyone knows what is the issue?

Christean

Custom navigation and tab bars are rarely worth the effort because you have to implement a lot of extra functionality to match what Apple offers, and what users expect. – Idioplasm

Answer 1

If it's undesired then just clip it, like

ScrollView {
  // .. content here
}
.clipped()    // << here !!

Orchid

Perfect! it's works on both iOS and MacOS – Pinfish

This workaround has at least one side effect (and possibly more): The content doesn't appear to blur or otherwise go "under" the navigation bar as one would expect. It is, indeed, simply clipped. – Hirudin

perfect solution. are you hero? :) You save my day. – Topsyturvydom

Yes, it's a workaround, but not perfect. It acts very strangely when you switch tabs. – Guava

Answer 2

If you want the nav bar on top, you can adjust its zIndex. This will allow the ScrollView to extend into the bottom safe area.

CustomNavBar(navTitle: "Newsfeed")
.zIndex(1)

Uncovered