SwiftUI reverse ScrollView from bottom to top

Question

I want to make a ScrollView that will give me the possibility to scroll from bottom to top. Basically I have a gradient background (bottom - black, top - white). When I set the ScrollView I can scroll down from white to black. I want the app to start at the bottom of ScrollView, to give me the possibility to scroll upwards. (From Black to White)

Thank you!

Current code:

struct ContentView: View {
var body: some View {


    ScrollView(.vertical/*, showsIndicators: false*/){
        VStack(spacing: 0) {
            ForEach ((0..<4).reversed(), id: \.self) {
                Image("background\($0)").resizable()
                    .aspectRatio(contentMode: .fill)
                    .frame(width: UIScreen.main.bounds.width ,height:1000)
            }
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .background(Color.red)
    }
    .edgesIgnoringSafeArea(.all)

}

}

The approach provided in How to make a SwiftUI List scroll automatically? can be useful — Asperi
– Asperi, Commented Apr 30, 2020 at 10:22

jonmecer · Accepted Answer · 2021-09-04 19:44:34Z

21

I wanted the scrollview to appear bottom to top instead of top to bottom. This had my answer: https://www.thirdrocktechkno.com/blog/implementing-reversed-scrolling-behaviour-in-swiftui/

TLDR: .rotationEffect(Angle(degrees: 180)).scaleEffect(x: -1.0, y: 1.0, anchor: .center) on the scrollview AND on the items in the scrollview

My full code:


ScrollView(.vertical, showsIndicators: true, content: {
                LazyVStack(alignment: .center, spacing: nil, pinnedViews: [], content: {
                    ForEach(1...5, id: \.self) { count in
                        ScrollView(.horizontal, showsIndicators: false, content: {
                            LazyHStack(alignment: .center, spacing: nil, pinnedViews: [], content: {
                                ForEach(1...10, id: \.self) { count in
                                    Text("Placeholder \(count)").rotationEffect(Angle(degrees: 180)).scaleEffect(x: -1.0, y: 1.0, anchor: .center)
                                }
                            })
                        })
                    }
                })
            }).rotationEffect(Angle(degrees: 180)).scaleEffect(x: -1.0, y: 1.0, anchor: .center)

answered Sep 4, 2021 at 19:44

jonmecer

7416 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

12 Comments

bze12 Over a year ago

the article you linked doesn't mention anything about using rotationEffect(). Are these two different solutions?

Rikco Over a year ago

For some reason, your solution works best. With other ones I had issues of jumping scrollview behavior when a new item is appended.

Lukas Over a year ago

Despite the rotation of the scroll view, the scroll view indicator is still placed correcty, which makes this the only solution without a drawback.

xinHAOr Over a year ago

@lr058 I agree with you. Swiftui currently implements scroll control in some scenes, eg: chat log view, is difficult.

Timothy Moose Over a year ago

This would be a great workaround if it didn't break swiping down to dismiss a sheet.

|

teradyl · Accepted Answer · 2025-03-19 00:13:53Z

3

Apple has an API for this if you're using iOS 17+

ScrollView() {
    // content
}
.defaultScrollAnchor(.bottom)

answered Mar 19 at 0:13

teradyl

2,9161 gold badge31 silver badges42 bronze badges

Comments

JRog · Accepted Answer · 2022-03-17 21:48:04Z

1

I was able to achieve this with a StackView inside a UIScrollView. Put whatever you want in the stackview then in the ViewController.viewDidLoad do

//flip the scrollview
scrollview.transform = CGAffineTransform(rotationAngle: Double.pi)
//flip the stackview
stackview.transform = CGAffineTransform(rotationAngle: Double.pi)

Now the scrollview will scroll from the bottom up

answered Mar 17, 2022 at 21:48

JRog

294 bronze badges

1 Comment

Andrej Over a year ago

This is based on UIKit, not on SwiftUI as the OP asked.

Collectives™ on Stack Overflow

SwiftUI reverse ScrollView from bottom to top

3 Answers 3

12 Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

12 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related