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
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

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
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
