ScrollKit

ScrollKit is a SwiftUI SDK that adds powerful scroll features, like offset tracking and a header view that stretches & transforms as you pull down, and sticks to the top when you scroll.

791
31
Swift

Project Icon

Version Swift 6.0 Swift UI Documentation MIT License

ScrollKit

ScrollKit is a SwiftUI SDK that adds powerful scroll features, like offset tracking and a header view that stretches & transforms as you pull down, and sticks to the top when you scroll.

ScrollKit works on all major Apple platforms and is designed to be easy to use. It doesn’t use the new ScrollView APIs for backwards compatibility reasons, but will eventually do so.

Installation

ScrollKit can be installed with the Swift Package Manager:

https://github.com/danielsaidi/ScrollKit.git

Getting started

ScrollKit has a ScrollViewWithOffsetTracking that can detect scrolling on all OS versions:

ScrollViewWithOffsetTracking { offset in
    print(offset)
} content: {
    // Add your scroll content here, e.g. a `LazyVStack`
}

ScrollKit has a ScrollViewWithStickyHeader that makes it easy to set up a stretchy, sticky header:

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,   // A header view
            headerHeight: 250,      // The resting header height
            headerMinHeight: 150,   // The minimum header height
            headerStretch: false,   // Disables the stretch effect
            contentCornerRadius: 20, // An optional corner radius mask
            onScroll: handleScroll  // An optional scroll handler action
        ) {
            // 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)")
        }
    }
}

For more information, please see the getting started guide.

Documentation

The online documentation has more information, articles, code examples, etc.

Demo Application

The demo app lets you explore the library. To try it out, just open and run the Demo project.

Support my work

You can sponsor me on GitHub Sponsors or reach out for paid support, to help support my open-source projects.

Your support makes it possible for me to put more work into these projects and make them the best they can be.

Contact

Feel free to reach out if you have questions or want to contribute in any way:

License

ScrollKit is available under the MIT license. See the LICENSE file for more info.