Hi!
In this tutorial, we will be demonstrating
how to make a vertically scrolling container
using our 'Smoothies to Door' example.
Proto.io makes it easy to create scrollable regions
within your prototypes.
You can create containers which can scroll vertically,
horizontally, or omni-directionally.
Let's get started!
To create a Scrollable Container,
we add a rectangle from our Basic Library
by dragging it onto our canvas.
We resize the rectangle to the same size as our canvas
and change its background color to white,
to create identical looking pages for our smoothies.
We will be adding two smoothies to our list,
so we duplicate the rectangle for our second smoothie.
Since we want to scroll vertically,
we place the two rectangles directly below the
'Red Fruit' screen by dragging them.
We now have added our two extra smoothies
and are ready to create our Scrollable Container.
To do this,
we select all the components on the canvas and group them.
We will rename our group to 'Smoothies' under the
'Layers' menu.
Right click the group and select
'Convert to scrollable container'.
Proto.io automatically creates a container
and detects that it should scroll vertically.
Alternatively, we could create the container by selecting our group
and clicking on 'Scroll' at the top of the Editor.
These are the default properties for all Scrollable Containers.
Let's preview our project!
Now, let's check out how we can customize
our Scrollable Container.
We can change the scrolling direction of our container to vertical,
horizontal or omni-directional,
depending on how we want our container to behave.
We can enable or disable scrolling
beyond the boundaries of our container.
'Inertia' means that after our mouse or finger leaves the screen,
the container continues to scroll in the intended direction
until it slowly stops.
When we disable 'Inertia',
scrolling stops as soon as the screen is released.
We can also enable or disable the scroll bar
when the user is scrolling.
Treating the Scrollable Container as snap
means that our screen snaps on each item as
we scroll, like a carousel.
Enabling pinching and zooming
allows the user to zoom into our Scrollable Container.
Finally, we can set our initial vertical position
to open the screen at any desired position.
Here, we set this to the position of our second smoothie
which is 667 pixels down.
That's it!
You're now equipped to easily create scrollable lists
in your projects.
