ScrollView positions content outside bounds

Question

matthewcheok OP

Created May ’20

Replies 2

Boosts 0

Views 3.0k

Participants 3

I'm trying to allow scrolling in both axes when the content is larger than the screen.

```

var body: some View {

ScrollView([.horizontal, .vertical]) {

Rectangle()

.foregroundColor(Color.red)

.frame(width: 500, height: 500)

}

```

1. The scroll view centers the content instead of beginning at the top-leading.

2. When scrolled to the trailing edge there's some whitespace (similarly the content bleeds past the leading edge.)

How do I fix the above issues?

Boost

Answer 1

Claude31 OP

May ’20

There is always the same trick: embed in a VStack. Why ? Cannot tell.

Try this:

struct ContentView: View {
    var body: some View {
        ScrollView([.horizontal, .vertical]) {
            VStack {
                Rectangle()
                    .frame(width: 300, height: 500)
                    .foregroundColor(Color.red)
            }.frame(width: 400, height: 800, alignment: .topLeading)
        }
    }
}

0

Answer 2

Juan OP

Sep ’22

I'm experiencing the same issue with a ScrollView with two axis set: ScrollView centers the content.

– Embedding in a VStack yields the same result, hence it's not a workaround (anymore?)

– Also having two nested ScrollView, one for each axis, doesn't produce the same scrolling behaviour as one ScrollView with the two axis.

Is as if there was an anchor point set somewhere that defaults to center when using this both axis.

Any ideas?

0