A Scroll layer is an interactive layer that contains scrollable content. In the Preview window, a user can scroll the content according to the properties you define.
To create a Scroll, click the Scroll tool in the Toolbar, then click and drag on the canvas to draw the Scroll layer.
To use a Scroll, you must also connect it to a second layer that the Scroll will display as its scrollable content.
Connect Scroll to a second layer that the Scroll will display
Tip: You can think of a Scroll as a window through which a user can scroll the Scroll's content layer.
To connect a selected Scroll to its content, click on the Connector on the right edge of the Scroll, then click on the layer that you would like the Scroll to use as its content.
Sticky elements within a Scroll component can be achieved by enabling the
Sticky property on the element, found in the top-right of the properties panel.
Push vs overlapping sticky elements
When multiple sticky elements collide while scrolling, you have control over whether the upcoming element 'pushes' the previous element out of the way, or if it should overlap instead.
Learn everything on setting up Sticky elements by watching the Framer Tips video below.
The Direction property controls whether a Scroll will move left and right or up and down—or both.
Tip: In most cases, a Scroll content layer will be larger than the Scroll layer itself. A vertical Scroll's content will be taller than the Scroll, while a horizontal Scroll’s content will be wider.
Depending on the orientation of the Scroll component, this being horizontal, vertical, or bi-directional, you are given the option to offset the content in pixels.
Offsetting the content pushes everything down or sideways, allowing you to begin scrolling at a specific position.
The Lock property controls whether the Scroll should ignore dragging in its opposite direction while scrolling.
When set to 1 Axis, the Scroll will ignore dragging along in its opposite direction once the user has begun scrolling.
The Drag property controls whether the Scroll should respond to drag interactions.
Drag property is set to
On, a user will be able to scroll the Scroll's content in the Preview by clicking and dragging.
The Wheel property controls whether the Scroll should respond to mouse scroll interactions.
Wheel property is set to
On, a user will be able to scroll the Scroll's content in the Preview with their device's standard scroll gesture.
Reset property allows you to force the Scroll content to reset all the way back to its original starting position in the Preview upon returning to it. The starting position is
0 by default, or a custom value when using the
In practical words: if some button within your Scroll content navigates to a new screen, upon returning to your screen with your Scroll content, the position is always remembered.
Reset property allows you to override this and force your prototype to reset the position of your Scroll content in this scenario, which is standard practice in various types of interfaces.
The Content property displays the Scroll’s connected content layer.
In addition to using the Connector method described above, you can choose the Scroll’s content layer in the Content property's dropdown.