What does contentOffset do in a UIScrollView?

Question

What is the use of the contentOffset property in UIScrollView?

Mehdi Ijadnazar · Answer 1 · 2016-08-21T09:39:01.430

118

It could be considered as the coordinate of the origin of scrollView's frame relative to the origin of its contentView's frame. See the picture below:

edited Aug 21 '16 at 09:39

answered Aug 21 '16 at 08:14

Mehdi Ijadnazar

4,532
4
35
35

21

This is a much better answer. The selected answer is just a rehashing of the documentation. – galactikuh Jan 04 '18 at 18:07
However this does not seem to work, when I change the value of x it does nothing. – Hugo Nov 21 '19 at 10:57
@Hugo I just described what it means, not how to get it to work correctly. Your problem may have various causes including where you are setting this property. – Mehdi Ijadnazar Mar 05 '20 at 14:41
2

Superb answer I would say, explained clear and simple – anoop4real Nov 18 '20 at 16:52

score 55 · Accepted Answer · answered Jul 27 '10 at 00:00

55

According to the documentation, the contentOffset property represents:

The point at which the origin of the content view is offset from the origin of the scroll view.

In plain speak, it's how far the view has moved in each direction (vertical and horizontal). You can unpack vertical and horizontal distance by accessing the x and y properties of the CGPoint:

CGFloat xOffset = _myScrollView.contentOffset.x;
CGFloat yOffset = _myScrollView.contentOffset.y;

answered Jul 27 '10 at 00:00

Justin

20,509
6
47
58

17

For example, if you wanted to present several (n) pages that could be scrolled through, you could create a UIScrollView with contentSize (n*pageWidth, pageHeight) and with frame size (pageWidth, pageHeight). You could then use contentOffset.x to determine (or set) which page was being (or should be) displayed. – westsider Jul 27 '10 at 00:12
2

Since scrolling is done by changing the bounds origin of the scroll view (or its content view? forget), is the contentOffset directly related to the bounds origin? – Marty Sep 26 '13 at 22:50

Jano · Answer 3 · 2019-11-09T18:48:54.513

enter image description here

Here you see two rectangles:

the visible area
the total area

Scrolling is changing the origin of the visible area within the total area.

In iOS all views have a visible area represented by the view.bounds rectangle. The class UIScrollView is a view with an unique property: it has a second rectangle called “content view” with a size bigger than its bounds. Thus, in a scroll view:

the visible area is scrollView.bounds
the total area is called content view, whose size is scrollView.contentSize

contentOffset is another name for scrollView.bounds.origin, implemented as follows:

var contentOffset: CGPoint { 
    get { return bounds.origin }
    set {
        var bounds = self.bounds
        bounds.origin = newValue
        self.bounds = bounds
    }   
}

When we change the contentOffset programmatically, we are also changing the bounds.origin, which causes a different area of the content view to be rendered. If we animate this change with setContentOffset(pt, animated: true), the scrollView appears to scroll as dragged by the user’s finger.

The official documentation defines contentOffset like this (italics are mine):

contentOffset: The point at which the origin of the content view (the total area) is offset from the origin of the scroll view (the visible area).

I’d like to highlight the comment of @westsider on the accepted answer:

For instance, if you want to present n pages that can be scrolled through, you create a UIScrollView with contentSize (n*pageWidth, pageHeight) and with bounds size (pageWidth, pageHeight). You then set contentOffset.x = (n-1) * pageWidth with n = 1 to display the first page.

What does contentOffset do in a UIScrollView?

3 Answers3

Linked