SwiftUI中如何阻止ScrollView向下滚动仅允许向上滚动？

嘿，我刚好处理过类似的需求——要阻止ScrollView向下滚动、避免露出顶部矩形上方的空白，其实有两种实用的原生方案，不用依赖第三方库：

方案一：基于UIKit代理的自定义ScrollView #

这个方案直接利用UIScrollView的代理方法拦截滚动行为，逻辑清晰且性能稳定：

import SwiftUI

// 封装一个仅允许向上滚动的ScrollView
struct RestrictedScrollView<Content: View>: UIViewRepresentable {
    let content: Content
    
    // 用ViewBuilder支持SwiftUI的内容语法
    init(@ViewBuilder content: () -> Content) {
        self.content = content()
    }
    
    func makeUIView(context: Context) -> UIScrollView {
        let scrollView = UIScrollView()
        scrollView.delegate = context.coordinator
        
        // 将SwiftUI内容嵌入到UIHostingController中
        let hostingController = UIHostingController(rootView: content)
        hostingController.view.translatesAutoresizingMaskIntoConstraints = false
        scrollView.addSubview(hostingController.view)
        
        // 约束SwiftUI内容和ScrollView同宽，高度自适应
        NSLayoutConstraint.activate([
            hostingController.view.topAnchor.constraint(equalTo: scrollView.topAnchor),
            hostingController.view.leadingAnchor.constraint(equalTo: scrollView.leadingAnchor),
            hostingController.view.trailingAnchor.constraint(equalTo: scrollView.trailingAnchor),
            hostingController.view.bottomAnchor.constraint(equalTo: scrollView.bottomAnchor),
            hostingController.view.widthAnchor.constraint(equalTo: scrollView.widthAnchor)
        ])
        
        return scrollView
    }
    
    func updateUIView(_ uiView: UIScrollView, context: Context) {}
    
    // 创建协调器来处理UIScrollView的代理事件
    func makeCoordinator() -> Coordinator {
        Coordinator()
    }
    
    class Coordinator: NSObject, UIScrollViewDelegate {
        func scrollViewDidScroll(_ scrollView: UIScrollView) {
            // 当用户试图向下滚动（contentOffset.y为负），强制拉回顶部
            if scrollView.contentOffset.y < 0 {
                scrollView.contentOffset = CGPoint(x: 0, y: 0)
            }
        }
    }
}

// 在你的ContentView中直接使用
struct ContentView: View {
    var body: some View {
        GeometryReader { geo in
            RestrictedScrollView {
                Rectangle()
                    .frame(width: geo.size.width, height: 400)
                    .foregroundColor(.black)
                // 加足够的空白确保能向上滚动
                Spacer(minLength: UIScreen.main.bounds.height)
            }
        }
    }
}

原理说明 #

核心是通过UIScrollViewDelegate的scrollViewDidScroll方法实时监控滚动偏移量：当用户向下拖动试图露出顶部空白时，contentOffset.y会变成负数，这时我们直接把偏移量强制设为(0,0)，彻底阻止向下滚动的行为。

方案二：纯SwiftUI实现（利用PreferenceKey+ScrollViewReader） #

如果你更倾向于纯SwiftUI的写法，可以用PreferenceKey监听滚动位置，配合ScrollViewReader强制滚动回顶部：

import SwiftUI

struct ContentView: View {
    @State private var scrollOffset: CGFloat = 0
    
    var body: some View {
        GeometryReader { geo in
            ScrollView {
                ScrollViewReader { proxy in
                    // 给顶部的矩形设置唯一ID，方便后续滚动定位
                    Rectangle()
                        .frame(width: geo.size.width, height: 400)
                        .foregroundColor(.black)
                        .id("top-rect")
                    // 确保有足够的滚动空间
                    Spacer(minLength: UIScreen.main.bounds.height)
                }
                .background(
                    // 用GeometryReader获取内容的滚动位置
                    GeometryReader { innerGeo in
                        Color.clear
                            .preference(
                                key: ScrollOffsetKey.self,
                                value: innerGeo.frame(in: .global).minY
                            )
                    }
                )
                .onPreferenceChange(ScrollOffsetKey.self) { value in
                    // 计算实际的滚动偏移，当内容试图向上移动（用户向下滚），强制滚回顶部
                    let actualOffset = value - geo.safeAreaInsets.top
                    if actualOffset > 0 {
                        proxy.scrollTo("top-rect", anchor: .top)
                    }
                }
            }
        }
    }
}

// 自定义PreferenceKey，用来传递滚动偏移量
struct ScrollOffsetKey: PreferenceKey {
    static var defaultValue: CGFloat = 0
    static func reduce(value: inout CGFloat, nextValue: () -> CGFloat) {
        value = nextValue()
    }
}

原理说明 #

我们通过PreferenceKey从GeometryReader中获取ScrollView内容的全局位置，当检测到内容的顶部超出屏幕顶部（也就是用户向下滚动）时，调用scrollTo方法把内容强制定位回顶部，达到禁止向下滚动的效果。

方案选择建议 #

• 如果你追求最流畅的滚动体验，优先选方案一，它直接操作UIKit的ScrollView，性能更优；
• 如果你想保持纯SwiftUI的代码风格，或者项目中尽量避免UIKit交互，那方案二更适合你。

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