SwiftUI ScrollViewReader scrollTo无法完全滚动至顶部问题

问题场景 #

点击Tab时希望ScrollView滚动到顶部，但首次点击仅滚动到与导航标题平行的位置，再次点击才会正常滚动到标题下方，且无法用ListView替代现有实现。

当前现象 #

• 首次点击Tab：滚动至与导航标题平行位置
• 再次点击Tab：滚动至导航标题下方，符合预期

已尝试无效方案 #

• 设置scrollTo的anchor参数，无效果
• 移除withAnimation，仅在无滚动过程时生效，滚动中点击Tab行为更异常

解决方案 #

问题根源在于ScrollViewReader嵌套位置错误，以及导航栏布局延迟导致首次滚动位置计算偏差。以下是修正后的完整代码及关键调整点：

修正后的完整代码 #

struct Tabs {
    static let One = "1"
    static let Two = "2"
    static let Three = "3"
}

struct ContentView: View {
    @State var scrollToTop = false
    @State private var currentTab: String = Tabs.One
    
    var body: some View {
        TabView(selection: tabSelection) {
            TestView(scrollToTop: $scrollToTop)
                .tabItem {
                    Label("First", systemImage: "1.circle")
                }
                .tag(Tabs.One)
        }
    }
    
    var tabSelection: Binding<String> {
        Binding(get: {
            currentTab
        }, set: { newValue in
            if newValue == currentTab {
                switch newValue {
                case Tabs.One:
                    scrollToTop = true
                case Tabs.Two:
                    print(newValue)
                case Tabs.Three:
                    print(newValue)
                default:
                    return
                }
            }
            currentTab = newValue
        })
    }
}

struct TestView: View {
    @Binding var scrollToTop: Bool
    
    var body: some View {
        NavigationView {
            ScrollViewReader { proxy in
                ScrollView {
                    LazyVStack {
                        Text("Text 0")
                            .id(0)
                        
                        ForEach(1...50, id: \.self) { index in
                            Text("Text \(index)")
                        }
                    }
                    .navigationTitle("Title")
                }
                .onChange(of: scrollToTop) { _ in
                    if scrollToTop {
                        DispatchQueue.main.asyncAfter(deadline: .now() + 0.05) {
                            withAnimation {
                                proxy.scrollTo(0, anchor: .top)
                            }
                        }
                        scrollToTop = false
                    }
                }
            }
        }
    }
}

关键修正点 #

• 调整ScrollViewReader位置：将其移到ScrollView外层，确保正确捕获滚动容器的布局上下文，避免代理作用范围错误。
• 添加延迟执行：用DispatchQueue.main.asyncAfter给导航栏布局留出时间，避免首次滚动时因导航栏未完全布局导致的位置计算偏差。
• 明确指定anchor: .top：强制将目标视图顶部对齐到滚动容器顶部，配合延迟执行彻底解决首次滚动位置偏移问题。

原理说明 #

首次点击Tab时，导航栏的布局尚未完全稳定，直接调用scrollTo会基于未最终确定的导航栏高度计算滚动位置，导致滚动到与标题平行的位置。延迟执行让系统完成导航栏布局后再执行滚动，就能得到正确的目标位置；同时修正ScrollViewReader的嵌套位置，确保滚动代理能正确作用于ScrollView容器。

内容的提问来源于stack exchange，提问作者Heshan