ScrollKit Documentation

ScrollKit provides two primary ways to track scroll offsets in SwiftUI:

1. ScrollViewWithOffsetTracking: A wrapper view that triggers an onScroll action whenever the content is scrolled.
2. ScrollViewOffsetTracker + .scrollViewOffsetTracking(action:): Use the ScrollViewOffsetTracker inside a scrollable container (like a List) and apply the .scrollViewOffsetTracking modifier to that container to receive the offset in a closure.

// Option 1: Using ScrollViewWithOffsetTracking
struct MyView: View {
    @State private var offset = CGPoint.zero
    
    func handleOffset(_ scrollOffset: CGPoint) {
        self.offset = scrollOffset
    }

    var body: some View {
        ScrollViewWithOffsetTracking(onScroll: handleOffset) {
            // Add your scroll content here
        }
    }
}

// Option 2: Using ScrollViewOffsetTracker with a modifier
List {
    ScrollViewOffsetTracker {
        ForEach(0...100, id: \.self) {
            Text("\($0)")
                .frame(width: 200, height: 200)
        }
    }
}
.scrollViewOffsetTracking { offset in
    print(offset)
}

To manage status bar appearance (e.g., hiding it until the user starts scrolling), you can use two approaches:

1. Manual Control: Use StatusBarVisibleState (an ObservableObject) and apply the .statusBarVisible(_:) modifier to your root content. This allows you to manually update the state based on scroll position.
2. Automatic Control: Use the .statusBarHiddenUntilScrolled(offset:) modifier. This is an experimental feature that automatically handles the state based on the provided offset.

Note: The automatic feature is experimental and may exhibit glitches in certain scenarios.

// Manual Control
struct ContentView: View {
    @StateObject private var state = StatusBarVisibleState()

    var body: some View {
        NavigationStack {
            // ...
        }
        .statusBarVisible(state)
    }
}

// Automatic Control (Experimental)
// .statusBarHiddenUntilScrolled(offset: someOffset)

Use ScrollViewWithStickyHeader to create a scroll view where the header stretches when pulled down and sticks to the top when scrolling.

Key parameters:

• header: The view to be used as the header.
• headerHeight: The resting height of the header.
• headerMinHeight: The minimum height the header can shrink to.
• headerStretch: A Boolean to enable/disable the stretching effect.
• contentCornerRadius: An optional corner radius for the content mask.
• onScroll: An optional closure (CGPoint, CGFloat) -> Void that provides the current scroll offset and the visibleHeaderRatio (a value from 0 to 1 representing how much of the header is visible below the navigation bar).

struct MyView: View {
    @State
    private var offset = CGPoint.zero
    @State
    private var visibleRatio = CGFloat.zero

    var body: some View {
        ScrollViewWithStickyHeader(
            header: stickyHeader,
            headerHeight: 250,
            headerMinHeight: 150,
            headerStretch: false,
            contentCornerRadius: 20,
            onScroll: handleScroll
        ) {
            // Add your scroll content here, e.g. a `LazyVStack`
        }
    }

    func handleScroll(_ offset: CGPoint, visibleHeaderRatio: CGFloat) {
        self.offset = offset
        self.visibleRatio = visibleHeaderRatio
    }

    func stickyHeader() -> some View {
        ZStack {
            Color.red
            ScrollViewHeaderGradient() // Default dark gradient
            Text("Scroll offset: \(offset.y)")
        }
    }
}

The ScrollViewWithStickyHeader component allows you to create a header that stretches when pulled down and sticks to the top when scrolling up.

Configuration Options:

• header: The view to be used as the header.
• headerHeight: The resting (default) height of the header.
• headerMinHeight: The minimum height the header can shrink to.
• headerStretch: A Boolean to enable or disable the stretching effect.
• contentCornerRadius: An optional corner radius applied to the content mask.
• onScroll: An optional closure (CGPoint, CGFloat) -> Void that provides the current scroll offset and the visibleHeaderRatio (the ratio of the header currently visible).

import SwiftUI
import ScrollKit

struct MyView: View {

    @State
    private var scrollOffset = CGPoint.zero

    @State
    private var visibleRatio = CGFloat.zero

    var body: some View {
        ScrollViewWithStickyHeader(
            header: stickyHeader,
            headerHeight: 250,
            headerMinHeight: 150,
            headerStretch: false,
            contentCornerRadius: 20,
            onScroll: handleScroll
        ) { 
            // Add your scroll content here, e.g. a `LazyVStack` 
        }
    }

    func handleScroll(_ offset: CGPoint, visibleHeaderRatio: CGFloat) {
        self.scrollOffset = offset
        self.visibleRatio = visibleHeaderRatio
    }

    func stickyHeader() -> some View {
        ZStack {
            Color.red
            ScrollViewHeaderGradient()  // By default a dark gradient
            Text("Scroll offset: \(scrollOffset.y)")
        }
    }
}