Add snapping behaviour to a SwiftUI ScrollView

Related tags

ScrollView SwiftUISnappingScrollView
Overview

SwiftUI Snapping ScrollView

Add snapping behaviour to a SwiftUI ScrollView.

Demo

SnappingScrollView

A scrollable view that supports snapping.

Usage

SnappingScrollView(.vertical) {
    //Header view
        .snappingScrollAnchor(.bounds)
            
    //Content views
}

Parameters

  • axis: The scroll view's scrollable axis. The default axis is the vertical axis.
  • decelerationRate: A floating-point value that determines the rate of deceleration after the user ends dragging. The default value for this parameter is .normal.
  • showsIndicators: A Boolean value that indicates whether the scroll view displays the scrollable component of the content offset, in a way suitable for the platform. The default value for this parameter is true.
  • content: The view builder that creates the scrollable view.

snappingScrollAnchor

A function that sets the scroll snapping anchor rect for a view.

Avoid setting the scroll snapping anchor rect on a child of a lazy view, such as a LazyHGrid, LazyVGrid, LazyHStack or LazyVStack.

Parameters

  • source: The source of the anchor rect.

Advanced Usage

SnappingScrollView can provide paging behaviour when initialised with a decelerationRate of .fast. Add the pages to a stack view with spacing set to 0. Any desired spacing should be added as padding to the edge of each page view:

SnappingScrollView(.horizontal, decelerationRate: .fast) {
    HStack(spacing: 0) {
        ForEach(...) {
            //Page view
                .padding(.trailing)
                .snappingScrollAnchor(.bounds)
        }
    }
}

snappingScrollAnchor should not be used on a child of a lazy view. Instead, use non-lazy parent views, and use onVisible to load data or update subviews when the view's bounds move into the visible frame. Provide padding to increase the distance from the visible frame that the action is called.

Requirements

  • iOS 13.0+
  • Xcode 12.0+

Installation

Contact

@ciaranrobrien on Twitter.

You might also like...
SwiftUI view enabling navigation between pages of content, imitating the behaviour of UIPageViewController for iOS and watchOS
SwiftUI view enabling navigation between pages of content, imitating the behaviour of UIPageViewController for iOS and watchOS

PageView SwiftUI view enabling page-based navigation, imitating the behaviour of UIPageViewController in iOS. Why SwiftUI doesn't have any kind of pag

Kacper Rączy 365 Dec 29, 2022
SwiftUI stack views with paged scrolling behaviour.

SwiftUI PageView SwiftUI stack views with paged scrolling behaviour. HPageView A view that arranges its children in a horizontal line, and provides pa

Ciaran O'Brien 41 Dec 21, 2022
Add PullToRefresh using animated GIF to any scrollView with just simple code
Add PullToRefresh using animated GIF to any scrollView with just simple code

UzysAnimatedGifPullToRefresh Add PullToRefresh using animated GIF to any scrollView with just simple code UzysAnimatedGifPullToRefresh features: simpl

Jaehoon Jung 1.4k Nov 20, 2022
A simple macOS utility that can be used to control the behaviour of Bose QC35 Headphones straight from the menu bar.

bose-macos-utility A simple macOS utility that can be used to control the behaviour of Bose QC35 Headphones straight from the menu bar. Why Have you e

Łukasz Zalewski 11 Aug 26, 2022
Allows you to use custom maps in iphone applications and attempts to mimics some of the behaviour of the MapKit framework
Allows you to use custom maps in iphone applications and attempts to mimics some of the behaviour of the MapKit framework

NAMapKit Lets you drop pins or custom annotations onto a standard UIImage or a tiled NATiledImageView. Includes callouts, multi-colored pins, animatio

Neil Ang 263 Jun 29, 2022
Pull to refresh functionality for any ScrollView in SwiftUI!
Pull to refresh functionality for any ScrollView in SwiftUI!

SwiftUIPullToRefresh Pull to refresh is a common UI pattern, supported in UIKit via UIRefreshControl. (Un)surprisingly, it's also unavailable in Swift

Gordan Glavaš 185 Dec 29, 2022
A SwiftUI ScrollView Designed to imitate the App Store and Apple Music ScrollViews (with or without a Parallax Header)
A SwiftUI ScrollView Designed to imitate the App Store and Apple Music ScrollViews (with or without a Parallax Header)

FancyScrollView I spent a lot of time looking for a way to recreate the UI of the ScrollViews in Stock Apple Apps (i.e. App Store and Apple Music) ins

Mathias Quintero 696 Dec 30, 2022
A SwiftUI ScrollView that only scrolls if the content doesn't fit in the View

ScrollViewIfNeeded A SwiftUI ScrollView that only scrolls if the content doesn't fit in the View Installation Requirements iOS 13+ Swift Package Manag

Daniel Klöck 19 Dec 28, 2022
SwiftUI ScrollView can pull to fresh

FreshScrollView SwiftUI ScrollView can pull to fresh One day, when I were writing a scrollview with a SwiftUI, I suddenly wanted to add a drop-down re

Weiha Wang 1 Dec 12, 2021
SwiftUI ScrollView can pull to fresh

FreshScrollView SwiftUI ScrollView can pull to fresh One day, when I were writing a scrollview with a SwiftUI, I suddenly wanted to add a drop-down re

Weiha Wang 0 Dec 8, 2021
A set of SwiftUI custom modifiers to make the ScrollView snappable.
A set of SwiftUI custom modifiers to make the ScrollView snappable.

Snappable A set of SwiftUI custom modifiers to make the ScrollView snappable. The goal of this library is to provide an easy way to implement Views su

hugehoge 22 Nov 30, 2022
SwiftUI ScrollView with custom pull to refresh & scroll to load-more implementations

PaginatedScrollView SwiftUI ScrollView with custom "pull to refresh" & "scroll to load-more" implementations. example usage PaginatedScrollView {

Aung Ko Min 7 Sep 20, 2022
A SwiftUI ScrollView that runs a callback when subviews are scrolled in and out of view.

VisibilityTrackingScrollView This package provides a variant of ScrollView that you can use to track whether views inside it are actually visible. Usa

Elegant Chaos 3 Oct 10, 2022
You can dismiss modal viewcontroller like Facebook Messenger by pulling scrollview or navigationbar in Swift.
You can dismiss modal viewcontroller like Facebook Messenger by pulling scrollview or navigationbar in Swift.

PullToDismiss PullToDismiss provides dismiss modal viewcontroller function like Facebook Messenger by pulling scrollview or navigationbar with smooth

Suguru Kishimoto 479 Dec 5, 2022
ScrollView that supports a parallax header image and static overlay.

ScrollViewReactiveHeader A replacement ScrollView that provides a header with subtle scroll animations. example-video.mov Using ScrollViewReactiveHead

null 49 Dec 29, 2022
High Quality Image ScrollView using cropped tiled images.
High Quality Image ScrollView using cropped tiled images.

THTiledImageView Feature 🖼 THTiledImageView fully support UIScrollView. You can subclass it and use it. 📡 Support Async Image Downloading & Caching.

null 28 Oct 28, 2022
MacOS scrollview nsview scrollbar bug demo

macOS SwiftUI ScrollView Scrollbar Bug Demo If you create a ScrollView that contains an NSView that intersects the scroll view's scrollbars, the scrol

Matt Curtis 0 Nov 14, 2021
You can dismiss modal viewcontroller like Facebook Messenger by pulling scrollview or navigationbar in Swift.
You can dismiss modal viewcontroller like Facebook Messenger by pulling scrollview or navigationbar in Swift.

PullToDismiss PullToDismiss provides dismiss modal viewcontroller function like Facebook Messenger by pulling scrollview or navigationbar with smooth

Suguru Kishimoto 479 Dec 5, 2022
Slideshow - An automatic scrolling carousel similar to how ScrollView is used
Slideshow - An automatic scrolling carousel similar to how ScrollView is used

an automatic scrolling carousel similar to how scrollview is used. for swiftui

HumorousGhost 5 Dec 8, 2022
Comments
  • Two way scrolling

    Two way scrolling

    I am trying to implement two way scrolling with double SnappingScrollViews (one horizontal, one vertical). While the view functions perfectly when using single scroll view with normal Views as elements. As soon as I change inner views with SnappingScrollView outer one acts like a normal scroll view (without snapping). Am I setting some params incorrectly or is this unimplemented/unsupported feature?

    opened by tatena 0
Owner
Ciaran O'Brien
Ciaran O'Brien
GitHub
SwiftUI ScrollView with custom pull to refresh & scroll to load-more implementations

PaginatedScrollView SwiftUI ScrollView with custom "pull to refresh" & "scroll to load-more" implementations. example usage PaginatedScrollView {

Aung Ko Min 7 Sep 20, 2022
MacOS scrollview nsview scrollbar bug demo

macOS SwiftUI ScrollView Scrollbar Bug Demo If you create a ScrollView that contains an NSView that intersects the scroll view's scrollbars, the scrol

Matt Curtis 0 Nov 14, 2021
You can dismiss modal viewcontroller like Facebook Messenger by pulling scrollview or navigationbar in Swift.

PullToDismiss PullToDismiss provides dismiss modal viewcontroller function like Facebook Messenger by pulling scrollview or navigationbar with smooth

Suguru Kishimoto 479 Dec 5, 2022
SwiftUI, peek scrolling animation and card tapped animation, using GeometryReader

SwiftUI, peek scrolling animation and card tapped animation, using GeometryReader, follow the livestream tutorial by MengTo.

Terry Kuo 4 Jun 10, 2022
SwiftUI OpenScrollView

A non gesture blocking, non clipping by default custom scroll view implementation with example code.

Marco Boerner 10 Dec 6, 2022
Simultaneously scrolling ScrollViews with SwiftUI support

SimultaneouslyScrollView Simultaneously scrolling ScrollViews with SwiftUI support Installation Swift Package Manager Usage SwiftUI support Example In

David Steinacher 8 Aug 19, 2022
A scroll view with a sticky header which shrinks as you scroll. Written with SwiftUI.

Scaling Header Scroll View A scroll view with a sticky header which shrinks as you scroll. Written with SwiftUI. We are a development agency building

Exyte 395 Dec 31, 2022
A customizable Snapping Drawer à la Apple Maps.

 100% in SwiftUI.

Snap A customizable Snapping Drawer à la Apple Maps, Apple Music, Stocks, Overcast, etc.. 100% in SwiftUI This is heavily inspired by Rideau and based

Mathias Quintero 632 Jan 4, 2023
HorizontalScroll - Horizontal Scroller with animation and snapping

HorizontalScroll iOS Application: Swift 5.5 Horizontal Scroller with animation a

Akshat Sharma 3 May 25, 2022
SwiftUIIndexedList - Add an index bar to a SwiftUI List or ScrollView

SwiftUIIndexedList Add an index bar to a SwiftUI List or ScrollView. Getting Sta

Ciaran O'Brien 25 Oct 27, 2022