iOS Scroll View Allows Scrolling Past Content

I'm trying to work on optimizing my app for landscape and smaller screens. I'm mostly using scroll views to achieve this. In one of my views I have a container view. This container view looks perfect when I toggle between devices in the storyboard. The container view is mapped to a view controller that has a scroll view that has top, bottom, leading, and trailing space set to superview 0. So it should fill the container. The actual view controller is set to Freeform Simulated Size with a width of 263 and a height of 190 (the exact size of the content inside of the scroll view).

Inside of the scroll view I just have labels displaying information.

This all seems to work fine. On smaller devices or in landscape you can scroll to view the content and view all the labels.

Only problem is on all devices and screen sizes you can scroll past the content. In both the X and Y axis. What's strange is on the horizontal axis the width of the container view is specifically set to 263. The only reason I'm using a scroll view is for height. There are no problems with width, even on smaller screens. But it still allows the user to scroll horizontally.

For a more specific example on a iPhone 4s in landscape the container view is 263 width and 90 height. But the content it self is 263 width and 190 height. So I want the user to be able to scroll down to view the rest of that 100 worth of content. But currently it allows the user to scroll sideways as well and scroll past the end of the content when scrolling down.

How can I fix this so the user can't scroll past the content?

Please let me know if you need any additional details or information. Explaining storyboard details can sometimes be a bit tricky so I would be happy to provide any additional details to make it more clear.

Much like the answer to your other question, the key is to understand that the Scroll View's content determines the scrollable area.

Suppose you have "TopLabel" constraints set to Leading: 0 and Top: 0. The label will be at the upper-left corner of the content and will define the upper-left corner of the scroll view's content frame.

Now put "BottomLabel" below and to the right, and set constraints to Trailing: 0 and Bottom: 0.

At this point, auto-layout doesn't know where to put the Top and Left part of "BottomLabel" because the scrollable area is not fully defined.

So, if you add constraints to "BottomLabel" of Leading: 60 and Top: 400, the Top-Left corner of "BottomLabel" will be placed at 60,400 and the scrollable area - the scroll view's contentSize - will be 60 + width of BottomLabel x 400 + height of BottomLabel

To avoid scrolling past the last view / image / label that you want to see, you need to make sure that element's constraints are controlling the width and height of the scrollview's content.