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?](https://stackoverflow.com/a/58708206/12299030) can be useful — Asperi, Apr 30 '20 at 10:22

score 11 · Answer 1 · answered Sep 04 '21 at 19:44

11

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 04 '21 at 19:44

jonmecer

611
6
15

the article you linked doesn't mention anything about using rotationEffect(). Are these two different solutions? – bze12 Feb 02 '22 at 19:57
For some reason, your solution works best. With other ones I had issues of jumping scrollview behavior when a new item is appended. – Rikco Apr 07 '22 at 12:11
1

Despite the rotation of the scroll view, the scroll view indicator is still placed correcty, which makes this the only solution without a drawback. – lr058 Sep 23 '22 at 08:36
@lr058 I agree with you. Swiftui currently implements scroll control in some scenes, eg: chat log view, is difficult. – xinHAOr Oct 13 '22 at 04:11
[This article](https://medium.com/@michael.forrest.music/how-to-make-a-scrollview-or-list-in-swiftui-that-starts-from-the-bottom-b0c4a69beb0d) explains the rotationEffect + scaleEffect solution and provides a ViewModifier. – Senseful Jul 17 '23 at 15:03
Lazy Stack seems not work. I mean all item will be loaded without lazy concept. – Binh Ho Jul 25 '23 at 06:31

score 1 · Accepted Answer · answered Mar 17 '22 at 21:48

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

SwiftUI reverse ScrollView from bottom to top

2 Answers2

Linked