ScrollKit

ScrollKit is a SwiftUI library 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

Support My Work

You can become a sponsor to help me dedicate more time on my various open-source tools. Every contribution, no matter the size, makes a real difference in keeping these tools free and actively developed.

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.

Contact

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

• Website: danielsaidi.com
• E-mail: [email protected]
• Bluesky: @[email protected]
• Mastodon: @[email protected]

License

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