How do I have the effect the scrolling behind the toolbar?

I am having problem of the scrollview always scroll below the toolbar, not behind (the toolbar becomes translucent). I am running macOS/iPadOS 26.

Here's my code:

        ZStack {
            NavigationStack {
                VStack {
                    if session == nil { Text("Please enter a word.") }
                    else { if session!.isResponding || question.count > 0 { answerPane }}
                    
                    Spacer()
                    questionPane
                }
                .padding()
                .toolbar { ... }
         }

What have I done wrong?

Following the suggestions below, I refactor my code to:

    NavigationStack {
        ZStack {
            ScrollView {
                VStack {
                    if session == nil { Text("Please enter a word.") }
                    else { if session!.isResponding || question.count > 0 { answerPane }}
                    
                    Spacer()
                    questionPane
                }
            }
            .scrollDismissesKeyboard(.immediately)
            .defaultScrollAnchor(.bottom, for: .sizeChanges)
        }
        .ignoresSafeArea(edges: .bottom)
        .padding()
        .toolbar {
            ToolbarItemGroup {
                Button("Clear", systemImage: "trash") { newSession() }
                    .help("Clear")
                
                Button("Settings", systemImage: "gearshape") { showSettings = true }
                    .help("Settings")
                    .popover(isPresented: $showSettings) {
                        SettingsView().presentationCompactAdaptation(.popover)
                    }
            
                ShareLink(item: answer)
                    .disabled((session?.isResponding ?? false) || answer.isEmpty)
                    .help("Share")
            }
        }
           ...
        .navigationTitle("Define")
        #if os(iOS)
        .navigationBarTitleDisplayMode(.inline)
        #endif
        .font(.system(size: fontSize))
    }

Despite some UI issues, I still can't get the effect I want? Toolbar still above the scrollview. The initial code scrollview was inside answerPane.

Solution

It may be the .padding() on the ZStack that is stopping the content from scrolling behind the toolbar. The padding breaks the contact with the safe area inset, so the safe area is no longer ignored.

Try moving the padding to the VStack instead:

NavigationStack {
    ZStack {
        ScrollView {
            VStack {
                // ...
            }
            .padding() // 👈 padding now here
        }
        .scrollDismissesKeyboard(.immediately)
        .defaultScrollAnchor(.bottom, for: .sizeChanges)
    }
    .ignoresSafeArea(edges: .bottom)
    // .padding() // 👈 this was causing the problem
    .toolbar {
        // ...
    }
    // 👇 uncomment this modifier to see the content scroll behind the toolbar
    // .toolbarBackgroundVisibility(.hidden, for: .navigationBar)

    // ... other modifiers, as before
}

To see the content actually go behind the toolbar, try hiding the toolbar background by applying .toolbarBackgroundVisibility(.hidden, for: .navigationBar) (see commented line in code above). Here is how it looks on an iPad mini when you do this:

Animation