如何阻止SwiftUI ScrollView在内部ForEach头部新增元素时自动滚动

问题核心原因 #

SwiftUI 原生 ScrollView 默认以顶部为锚点计算 contentOffset，当你向数组头部插入元素时，整个内容的总高度会增加，原有内容的位置整体下移，ScrollView 为了保持当前相对于左上角的偏移量不变，视觉上就会自动向下滚动，露出刚插入的头部元素。

方案1：iOS 16+ 原生API实现（无需封装UIScrollView） #

用scrollPosition(id:)和scrollTargetLayout锚定当前可见的首个元素，插入新元素后保持锚定位置不变，就不会触发自动滚动：

struct ContentView: View {
    @State var list = [1, 2, 3]
    // 绑定当前可见的顶部元素ID
    @State private var visibleTopId: Int?
    
    var body: some View {
        VStack {
            ScrollView {
                LazyVStack {
                    ForEach(list, id: \.self) { element in
                        Text("\(element)")
                            // 绑定元素ID，用于滚动定位
                            .id(element)
                    }
                }
                // 标记滚动目标布局
                .scrollTargetLayout()
            }
            .frame(maxHeight: 300)
            // 绑定滚动位置
            .scrollPosition(id: $visibleTopId, anchor: .top)
            Button(action: {
                // 插入前先记录当前可见的顶部元素
                let currentTop = visibleTopId
                let newItem = Int.random(in: 1...1000)
                list = [newItem] + list
                // 插入后重新锚定到原来的顶部元素，避免滚动
                visibleTopId = currentTop
            }) {
                Text("Add")
                    .font(.title)
            }
        }
    }
}

注：如果你的列表元素可能重复，不要用元素值作为ID，换成独立的唯一标识符即可。

方案2：兼容低版本iOS 封装UIScrollView实现 #

如果需要支持iOS15及更低版本，可以封装UIScrollView，插入元素时手动调整contentOffset抵消新增高度的影响：

• 插入新元素前记录当前的contentOffset.y
• 插入新元素后，计算所有新增元素的总高度，将新的contentOffset.y设置为 原偏移量 + 新增元素总高度
  即可保持原有视觉位置不变，新增元素仅在用户向上滚动时可见。

内容的提问来源于stack exchange，提问作者Mattia C.