SwiftUI：禁用点击屏幕顶部时ScrollView自动滚至顶部的行为

你遇到的是iOS默认的「滚动到顶部」手势触发的问题，SwiftUI本身没有提供直接的开关，需要借助UIKit的桥接来解决，以下两种方法任选其一：

方法一：给ScrollView添加禁用扩展 #

先编写一个View扩展，通过修改底层UIScrollView的属性来关闭该手势：

extension View {
    func disableScrollToTop() -> some View {
        self.background(ScrollToTopDisabler())
    }
}

struct ScrollToTopDisabler: UIViewRepresentable {
    func makeUIView(context: Context) -> UIView {
        let view = UIView()
        DispatchQueue.main.async {
            // 定位到底层UIScrollView并关闭滚动到顶部功能
            if let scrollView = view.superview?.superview as? UIScrollView {
                scrollView.scrollsToTop = false
            }
        }
        return view
    }
    
    func updateUIView(_ uiView: UIView, context: Context) {}
}

然后给你的ScrollView应用这个修饰符即可：

struct MyView: View {
    var body: some View {
        VStack(spacing:0) {
            TopBarView()
            ScrollView(.vertical) {
                ForEach(0..<100, id: \.self) { index in
                    Text(String(index))
                }
            }
            .disableScrollToTop() // 添加此行禁用自动滚顶
        }
    }
    
    struct TopBarView: View {
        var body: some View {
            Text("This is a top bar")
                .frame(maxWidth: .infinity, minHeight: 50)
                .background(Color.gray.opacity(0.2))
        }
    }
}

方法二：自定义无滚顶功能的ScrollView组件 #

如果你更倾向于直接基于UIKit封装组件，可以自己实现一个禁用滚顶的ScrollView：

struct NoTopScrollView<Content: View>: UIViewRepresentable {
    let content: Content
    
    init(@ViewBuilder content: () -> Content) {
        self.content = content()
    }
    
    func makeUIView(context: Context) -> UIScrollView {
        let scrollView = UIScrollView()
        scrollView.scrollsToTop = false // 直接禁用滚动到顶部手势
        
        // 将SwiftUI内容嵌入UIScrollView
        let hostingView = UIHostingController(rootView: content).view
        hostingView?.translatesAutoresizingMaskIntoConstraints = false
        if let hostingView = hostingView {
            scrollView.addSubview(hostingView)
            
            NSLayoutConstraint.activate([
                hostingView.leadingAnchor.constraint(equalTo: scrollView.leadingAnchor),
                hostingView.trailingAnchor.constraint(equalTo: scrollView.trailingAnchor),
                hostingView.topAnchor.constraint(equalTo: scrollView.topAnchor),
                hostingView.bottomAnchor.constraint(equalTo: scrollView.bottomAnchor),
                hostingView.widthAnchor.constraint(equalTo: scrollView.widthAnchor)
            ])
        }
        
        return scrollView
    }
    
    func updateUIView(_ uiView: UIScrollView, context: Context) {
        // 内容更新时同步刷新
        if let hostingController = uiView.subviews.first?.next as? UIHostingController<Content> {
            hostingController.rootView = content
        }
    }
}

替换原代码中的ScrollView为这个自定义组件：

struct MyView: View {
    var body: some View {
        VStack(spacing:0) {
            TopBarView()
            NoTopScrollView {
                ForEach(0..<100, id: \.self) { index in
                    Text(String(index))
                }
            }
        }
    }
    
    struct TopBarView: View {
        var body: some View {
            Text("This is a top bar")
                .frame(maxWidth: .infinity, minHeight: 50)
                .background(Color.gray.opacity(0.2))
        }
    }
}

原理说明 #

两种方法的核心都是将UIScrollView的scrollsToTop属性设为false——该属性默认开启，会响应点击状态栏或ScrollView上方区域的滚顶手势，关闭后就能彻底禁用这个行为。

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