Scrolling » Content inset

Content inset

Here’s an example of when you would use ‘content inset’: Say we have a navigation bar and toolbar that partly obscure the content, like this:

# status bar + navigation bar
statusAndNavigationBar = new Layer
    width: scroll.width, height: 64
    backgroundColor: "#2DD7AA"
    parent: scroll
    opacity: .8
# toolbar at the bottom of the screen
toolBar = new Layer
    width: scroll.width, height: 44
    backgroundColor: "#2DD7AA"
    parent: scroll
    opacity: .8
    y: scroll.height - 44
Download Framer project

Note that these layers don’t have scroll.content as their parent layer but just scroll. This way they will stay put.

A ScrollComponent containing a few static layers
Navigation bar and toolbar block the content

To avoid that the content is being covered by these static bars we can add extra spacing to it called inset.

The contentInset property takes an object with values for top, bottom, left and right.

# content inset for the top & bottom bars
scroll.contentInset =
    top: statusAndNavigationBar.height + 16
    bottom: toolBar.height + 16
    left: 0
    right: 0
Download Framer project

Here we used the height values of the bars plus an extra 16 points of spacing.

(You don’t need to write all four, left and right might as well have been omitted here.)

A ScrollComponent with content inset applied
ScrollComponent with inset for the content