SwiftUI problems: Decreasing the clickable area of buttons inside the scrollview if the view is adjacent to the list

Question

I have a scrollable panel with buttons above the list. And in this layout the lower part of buttons is unclicable.

import SwiftUI

struct TestListScreen: View {

    var body: some View {
        
        NavigationView {
            
            VStack(spacing: 0) {
                ScrollView(.horizontal, showsIndicators: true) {
                    HStack(spacing: 8) {
                        
                        ForEach(1..<10) { i in
                            Button { print(i) } label: {
                                Text("Button \(i)")
                                    .padding(24)
                                    .background(Color.yellow)
                            }
                        }
                    }
                }
                
                List {
                    ForEach(1..<100) { i in
                        Text(String(i))
                    }
                }
                .listStyle(.plain)
                .listRowInsets(EdgeInsets())
                .frame(maxHeight: .infinity)
            }
            .navigationBarTitle("Buttons above the list", displayMode: .inline)
        }

    }
}

struct TestListScreen_Previews: PreviewProvider {
    static var previews: some View {
        TestListScreen()
    }
}

If I remove ScrollView wrapped buttons HStack, or if I remove the list under buttons, everything works well. Also I cannot replace list with a ScrollView + VStack because of poor performance.

Answer 1

So... the "problem" is that you have a scrolling view of button. That 16 pixels is to show the scrollbar when you drag the view.

Easy fix is to leave space for it by adding padding.

                    ScrollView(.horizontal, showsIndicators: true) {
                    HStack(spacing: 8) {
                        ForEach(1..<10) { i in
                            Button { print(i) } label: {
                                Text("Button \(i)")
                                    .padding(24)
                                    .background(Color.yellow)
                            }
                        }
                    }
                    .padding(.bottom, 16)

note: while adding the space does make the whole button clickable, if you just finished dragging the buttons, the 16 pixels is increased for a couple seconds after you finish dragging. During that time, part of the button sill won't be clickable, instead it makes the scrollbar tab get bigger.