SwiftUIScrollKit

SwiftUIScrollKit helps you easily use scroll-related components in SwiftUI. 📜

Basic Scroll Components

SwiftUI scroll components don't provide their scroll offset. You can easily know it with this components.

1️⃣ ScrollViewWithOffset

You can read scroll offset of ScrollView

horizontal	vertical

struct ContentView: View {
    
    var body: some View {
        ScrollViewWithOffset(
            items: [
                Color.red.frame(width: 500, height: 500),
                Color.green.frame(width: 500, height: 500),
                Color.yellow.frame(width: 500, height: 500),
            ],
            direction: .vertical,
            onOffsetChanged: {
                // you can do something with offset
            }
        )
    }
}

2️⃣ PageStyleTabViewWithOffset

You can read scroll offset of PageStyle TabView

It only gives offset within one page. If you want to know whole scroll offset, you can use FullCarousel

struct ContentView: View {
    
    @State private var currentPage: Int = 0
    @State private var offset: CGFloat = 0
    
    var body: some View {
        PageStyleTabViewWithOffset(
            items: [
                Color.red,
                Color.green,
                Color.yellow
            ],
            onCurrentPageChanged: {
                currentPage = $0
            },
            onOffsetChanged: {
                offset = $0
            }
        )
    }
}

Advanced Scroll Components

You can also use various types of scroll components.

1️⃣ CenteredCarousel

struct ContentView: View {
    
    @State var currentPage: Int = 0
    @State var offset: CGFloat = 0
    
    var body: some View {
        CenteredCarousel(
            items: [
                Color.red,
                Color.green,
                Color.orange,
                Color.blue
            ],
            pagerWidth: UIScreen.main.bounds.width,
            sectionPadding: 50,
            cardPadding: 20,
            height: 300,
            onCurrentPageChanged: {
                currentPage = $0
            },
            onOffsetChanged: {
                offset = $0
            }
        )
    }
}

2️⃣ FullCarousel

struct ContentView: View {
    
    @State var currentPage: Int = 0
    @State var offset: CGFloat = 0
    
    var body: some View {
        FullCarousel(
            items: [
                Color.red,
                Color.green,
                Color.orange,
                Color.blue
            ],
            itemSize: CGSize(width: UIScreen.main.bounds.width, height: 400),
            onCurrentPageChanged: {
                currentPage = $0
            },
            onOffsetChanged: {
                offset = $0
            }
        )
    }
}

3️⃣ RatioCarousel

you can set the ratio you want to scroll with this.

struct ContentView: View {
    
    @State var currentPage: Int = 0
    @State var offset: CGFloat = 0
    
    var body: some View {
        RatioCarousel(
            items: [
                Color.red,
                Color.green,
                Color.orange,
                Color.blue
            ].map { $0.padding(.horizontal, 5) },
            itemSize: CGSize(width: 300, height: 400),
            scrollRatio: 0.7,
            onCurrentPageChanged: {
                currentPage = $0
            },
            onOffsetChanged: {
                offset = $0
            }
        )
    }
}

Requirements

• iOS 15.0+
• Swift 5.9+

Installation

Swift Package Manager

You can install SwiftUIScrollKit using Swift Package Manager. Simply add the following line to your Package.swift file:

dependencies: [
    .package(url: "https://github.com/eunjin3786/SwiftUIScrollKit.git", from: "1.0.0")
]