BLACK FRIDAY SALE: Save big on all my Swift books and bundles! >>

SOLVED: ScrollView - push contents to top

Forums > SwiftUI

I'm trying to display the contents of a text file in a ScrollView that has both vertical and horizontal scrolling.

All is well when then contents of the file are large enough to fill the screen. However, for smaller files e.g. only 3 lines, the text is displayed, but in the middle of the screen. I've tried adding a Spacer() in various places but this does not help. Also, removing the horizontal scrolling pushes the contents to the top, but I need both vertical and horizontal scrolling.

Here's some example code showing the problem:

struct ContentView: View {
    var string = """
    Line 1 - Lorem ipsum dolor sit amet, consectetur adipiscing elit
    Line 2 - Lorem ipsum dolor sit amet, consectetur adipiscing elit
    Line 3 - Lorem ipsum dolor sit amet, consectetur adipiscing elit
    """

    var body: some View {
        NavigationView {
            ScrollView([.horizontal, .vertical]) {
                    Text(string)
                Spacer()
            }
            .padding()
            .navigationTitle("Scrolling")
        }
    }
}

Here's a link to a screenshot of the problem - screenshot

Does anyone know how to push the contents of the ScrollView to the top of the screen?

Thanks.

Gavin

2      

This works for me. Not sure if this is the optimal solution, though.

Add a second ScrollView().

struct ScrollViewTroubleShooting: View {
    var string = """
    Line 1 - Lorem ipsum dolor sit amet, consectetur adipiscing elit
    Line 2 - Lorem ipsum dolor sit amet, consectetur adipiscing elit
    Line 3 - Lorem ipsum dolor sit amet, consectetur adipiscing elit
    """

    var body: some View {
        NavigationView {
            VStack {
                Text("Label")
                ScrollView([.horizontal]) { // First scroll view is horizontal
                    ScrollView([.vertical]) { // Second scroll view is vertical
                        Text(string)
                    }
                    .padding()
                    .navigationTitle("Scrolling")
                }
            }
        }
    }
}

1      

@Obelix - interesting solution! Thanks.

1      

I'm getting the same result as you @gavinjerman when using ScrollView with two simultaneous axis. The content offset defaults to the top of the contained view when using one axis (either one) but it gets scrolled to the center of the contained view when adding the second axis to the array of axis.

I'm trying to figure out why this happens (and how to control it) but it seems hard to find. Any ideas?

The workaround by @Obelix is an option until I try implementing a magnification gesture to take care of the zoom, then I need both axis in the ScrollView.

   

Hacking with Swift is sponsored by RevenueCat

SPONSORED In-app subscriptions are a pain to implement, hard to test, and full of edge cases. RevenueCat makes it straightforward and reliable so you can get back to building your app. Oh, and it's free if your app makes less than $10k/mo.

Learn more

Sponsor Hacking with Swift and reach the world's largest Swift community!

Reply to this topic…

You need to create an account or log in to reply.

All interactions here are governed by our code of conduct.

 
Unknown user

You are not logged in

Log in or create account
 

Link copied to your pasteboard.