SwiftUI垂直分页ScrollView过度滚动问题排查求助

尝试制作垂直分页滚动器时，遇到ScrollView“过度滚动”到下一页的异常情况。已通过边框调试确认帧尺寸无误，且禁用了原本怀疑存在问题的TabBar。相关页面截图如下：

• 第1页：
• 第2页：
• 第20页：

初始实现代码 #

struct ContentView: View {
    var body: some View {
        ScrollView(.vertical) {
            LazyVStack(spacing: 0) {
                ForEach(0 ..< 100) { i in
                    ZStack {
                        Rectangle()
                            .fill(colors[i % colors.count].opacity(0.6))
                            .containerRelativeFrame([.horizontal, .vertical])
                        Text("Video \(i + 1)")
                            .font(.title)
                            .bold()
                    }
//                    .frame(maxHeight: .infinity)
                }
            }
            .scrollTargetLayout()
        }
        .scrollTargetBehavior(.paging)
    }
}

尝试的解决方法及问题 #

给ScrollView添加.ignoresSafeArea()可以解决分页过度滚动的问题，但会导致ZStack内容侵入TabView区域，代码如下：

TabView {
  ScrollView(.vertical) {
      LazyVStack(spacing: 0) {
        ForEach(0 ..< 100) { i in
          ZStack {
            Rectangle()
              .fill(colors[i % colors.count].opacity(0.6))
            Text("Video \(i + 1)")
              .font(.title)
              .bold()
          }
          .frame(maxHeight: .infinity)
          .containerRelativeFrame([.horizontal, .vertical])
        }
      }
      .scrollTargetLayout()
    }
    .scrollTargetBehavior(.paging)
    .ignoresSafeArea()
}

补充说明 #

经确认这是SwiftUI的Bug，临时解决方案可采用以下思路：

• 调整安全区域适配范围：不在ScrollView层级直接添加.ignoresSafeArea()，而是在内部的分页视图中针对特定边缘设置忽略，避免内容侵入TabBar区域。
• 自定义滚动目标行为：手动计算分页的边界尺寸，替换系统默认的.paging行为，精准控制滚动停止的位置，避免过度滚动判定错误。

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