SwiftUI中ScrollView嵌套ZStack时scrollTo失效问题咨询

问题原因 #

你遇到的scrollTo无效问题，核心在于ZStack内部元素的布局逻辑：

• 用position设置元素位置时，仅改变了元素的视觉显示位置，并未改变它的布局框架（layout frame）。ZStack里的所有元素默认重叠在中心区域，它们的布局框架都集中在同一个位置，导致ScrollViewReader无法通过id定位到对应元素的正确滚动偏移量。
• 而HStack是流式布局，每个元素的布局框架在滚动轴上连续排列，ScrollViewReader可以直接关联id与滚动位置，因此scrollTo正常工作。

解决方案 #

不需要额外添加id或其他临时 workaround，只需调整ZStack的对齐方式，用offset替代position来设置元素位置，让元素的布局框架与视觉位置一致：

import SwiftUI

struct ContentView: View {
    
    var body: some View {
        let numItems: Int = 100
        let itemWidth = 60.0
        let itemHeight = 100.0
        
        VStack(spacing: 4) {
            
            Spacer()
            
            ScrollViewReader { firstScrollProxy in
                ScrollView(.horizontal) {
                    // 设置ZStack对齐方式为左上角，让子元素从该点开始布局
                    ZStack(alignment: .topLeading) {
                        ForEach(0..<numItems, id:\.self) { x in
                            Rectangle()
                                .fill(Color.purple)
                                .frame(width: itemWidth - 2, height: itemHeight)
                                .overlay {
                                    Text("\(x)")
                                }
                                // 用offset替代position，确保布局框架与视觉位置匹配
                                .offset(x: Double(x) * itemWidth)
                        }
                    }
                    .frame(width: Double(numItems) * itemWidth, height: itemHeight)
                }
                .onTapGesture {
                    withAnimation {
                        firstScrollProxy.scrollTo(17, anchor: .center)
                    }
                }
            }
            .padding(8)
            .background(Color(white: 0.2))
            
            Color.clear.frame(height: 10)
            
            ScrollViewReader { secondScrollProxy in
                ScrollView(.horizontal) {
                    HStack(spacing: 2) {
                        ForEach(0..<numItems, id:\.self) { x in
                            Rectangle()
                                .fill(Color.blue)
                                .frame(width: itemWidth - 2, height: itemHeight)
                                .overlay {
                                    Text("\(x)")
                                }
                        }
                    }
                    .frame(height: itemHeight)
                }
                .onTapGesture {
                    withAnimation {
                        secondScrollProxy.scrollTo(17, anchor: .center)
                    }
                }
            }
            .padding(8)
            .background(Color(white: 0.25))
            
            Spacer()
        }
        .background(.black)
        .foregroundColor(.white)
        
    }
}

原理说明 #

• ZStack(alignment: .topLeading)指定了子元素的布局起点，避免所有元素默认重叠在中心。
• offset(x: Double(x) * itemWidth)让每个元素在x轴方向依次偏移，此时元素的布局框架位置与视觉显示位置完全匹配，ScrollViewReader可以通过id精准定位到对应元素的滚动偏移量，scrollTo功能就能正常生效。

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