Scrolling » Wrapping

Wrapping

If you have content that’s already prepared (e.g., in Design or Sketch) you can create a ScrollComponent and add content to it with one single command: ScrollComponent.wrap().

# wrapping “scrollable_content” in a ScrollComponent
scroll = ScrollComponent.wrap scrollable_content
# setting the ScrollComponent’s properties
scroll.props =
    borderColor: "gray"
    borderWidth: 1
    height: 667     # width is already set
    scrollHorizontal: no
    point: Align.center
Download Framer project

In this example, we had to correct the ScrollComponent’s height. However, when your layer contains child layers that you already masked in Sketch, the layer’s dimensions will be maintained, and its children will become scrollable content.

A layer wrapped in a ScrollComponent