ScrollKit adds powerful scrolling features to SwiftUI
, such as scroll offset tracking and scroll view headers that stretch out as you pull down and stick to the top when you scroll.
The result can look like this, or completely different:
ScrollKit has a ScrollViewWithOffset
that provides you with the scroll view offset, a ScrollViewHeader
that automatically stretches out when the scroll view is pulled down, and a ScrollViewWithStickyHeader
that pins the header view to the top as it is scrolled below the navigation bar.
ScrollKit's views are designed to be easy to use, and basically just add more properties to the standard SwiftUI ScrollView
. They can be used on all Apple platforms, including iOS, macOS, tvOS and watchOS.
ScrollKit supports iOS 14
, macOS 11
, tvOS 14
and watchOS 7
.
ScrollKit can be installed with the Swift Package Manager:
https://github.com/danielsaidi/ScrollKit.git
If you prefer to not have external dependencies, you can also just copy the source code into your app.
The online documentation has a getting started guide guide to help you get started with ScrollKit.
To create a scroll view with a stretchable, sticky header, just create a ScrollViewWithStickyHeader
and provide it with a header view and header height:
struct MyView: View {
@State
private var offset = CGPoint.zero
@State
private var visibleRatio = CGFloat.zero
func handleOffset(_ scrollOffset: CGPoint, visibleHeaderRatio: CGFloat) {
self.offset = scrollOffset
self.visible = visibleHeaderRatio
}
func header() -> some View {
ZStack(alignment: .bottomLeading) {
Color.blue
Color.yellow.opacity(visibleRatio) // Fades in
}
}
var body: some View {
ScrollViewWithStickyHeader(
header: header,
headerHeight: 250,
onScroll: handleOffset
) {
// Add your scroll view content here as regular
}
}
}
The header visible ratio is based on the header height and scroll view offset and lets you adjust your content as the header is scrolled under the navigation bar, for instance to modify the header and fade in a navigation title.
For more information, please see the online documentation and getting started guide guide.
The online documentation contains more information, code examples, etc., and makes it easy to overview the various parts of the library.
The demo app lets you explore the library on iOS and macOS. To try it out, just open and run the Demo
project.
I manage my various open-source projects in my free time and am really thankful for any help I can get from the community.
You can sponsor this project on GitHub Sponsors or get in touch for paid support.
Feel free to reach out if you have questions or if you want to contribute in any way:
- Website: danielsaidi.com
- Mastodon: @danielsaidi@mastodon.social
- Twitter: @danielsaidi
- E-mail: daniel.saidi@gmail.com
ScrollKit is available under the MIT license. See the LICENSE file for more info.