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.
contentInset property takes an object with values for
# 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,
right might as well have been omitted here.)