SwiftUI视图加载时如何用ScrollViewReader滚动到指定位置

核心问题分析 #

你的代码当前存在两个关键问题：

1. 数据加载与滚动触发时机不匹配：视图的.onAppear会在首次渲染时触发，但此时异步获取的data可能还未加载完成，ForEach还没渲染出对应tag的子视图，导致proxy.scrollTo(2)找不到目标。
2. ScrollViewReader嵌套结构错误：你把ScrollViewReader放在了ScrollView内部，正确做法是用ScrollViewReader包裹ScrollView，这样代理才能正确控制滚动行为。

修正后的实现步骤 #

1. 调整ScrollView与ScrollViewReader的嵌套结构

将ScrollViewReader移到外层，包裹整个横向ScrollView，确保代理能正确关联到滚动视图。

2. 监听数据加载完成后再触发滚动

不要直接在视图.onAppear里调用scrollTo，而是监听data的变化，当数据加载完成后再执行滚动。同时保留视图出现时的判断，避免数据已加载但未触发滚动的情况。

3. 简化tag的使用

FeedModel中的tag已经是Int类型，直接用.tag(item.tag)即可，无需额外转换。

修正后的完整代码示例 #

ScrollViewReader { proxy in
    ScrollView(.horizontal, showsIndicators: false) {
        HStack {
            ForEach(data) { item in
                ZStack {
                    ScrollView(.vertical, showsIndicators: false) {
                        VStack(spacing: 15) {
                            if item.name == "" {
                                Indicator.Continuous(color: dopplePurple)
                                    .resizable()
                                    .frame(width: 30, height: 30)
                            } else {
                                LastSnippetRow(
                                    refSnippet: item,
                                    refreshData: refresh,
                                    showBanner: $showBanner,
                                    showExpiredBanner: $showExpiredBanner,
                                    bonId: bonId
                                )
                            }
                        }
                    }
                }
                .padding(.top, 15)
                .tag(item.tag)
            }
        }
        // 监听数据变化，加载完成后滚动到目标位置
        .onChange(of: data) { newData in
            guard !newData.isEmpty else { return }
            proxy.scrollTo(2, anchor: .center) // anchor可选，控制滚动后对齐方式
        }
        // 视图出现时如果数据已存在，触发滚动
        .onAppear {
            guard !data.isEmpty else { return }
            proxy.scrollTo(2)
        }
    }
}

补充说明 #

• 若data通过异步请求获取，确保请求完成后正确赋值data，.onChange(of: data)会自动触发滚动。
• scrollTo的anchor参数可选，支持.leading（左对齐）、.center（居中）、.trailing（右对齐），可根据需求调整。
• 确认目标tag在data数组中存在，否则滚动操作不会生效。

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