How do I make a scrollable container?

What is a container?

Containers are reusable custom components that can contain UI items, interactions, animations, etc. They can be used in various ways and have different behaviors, the most common being to:

  • Group common UI items and behaviors and reuse them in different screens across your Proto.io project. This way you don’t have to recreate or copy them, saving time and allowing for much better maintenance, since changes made to the container itself update every instance of that container in your project.
  • Create scrollable blocks of content and UI elements.

 

How do I make a container?

Keep in mind that a container can be in any width and height size (in pixels). When creating a new container, a canvas with the defined container size appears. You can use that canvas to add UI elements and interactions. For a container to work, it has to be added to a screen (or to another container). After that, you can define the container viewable size which in many cases can be different (usually smaller) than the original container size. 

Note: in the New Container modal, you see options 'x1', 'x2', 'x3' etc. next to width and height. This is so that you can quickly create a container with e.g. 3 times the normal screen height, which can be later added to a screen and made to appear vertically scrollable. 

 

How do I make a container scrollable?

As mentioned, if the container viewable size is smaller than the original size (in width and/or height), then you can make the container appear as scrollable when previewed. When adding your container to a screen (or to another container), you will see Scroll properties in the Properties Inspector. You can choose between Horizontally, Vertically and Omni-directionally and edit other settings.

 Example

From the Sample project, let's see how the Smoothies screen is made to appear scrollable.

We created a container named 'Smoothies List Vertical Scrollable' with height equal to 3 times that of the screen, i.e. 2000px. That would look like this after UI items are included:

After we're done editing, we can add it to the Smoothies screen. While having the screen open in the canvas, navigate through the containers list and when you find the particular one, click the 'Add to canvas' icon.

You'll see this. You can change the Scroll option to 'Vertically' and also check the option 'Treat scroll container as snap (carousel)'. The second option makes sure that when the user scrolls, it feels like s/he changes pages.

You can now preview your project in Player. You will see that the screen appears scrollable (seen in image below), but it also snaps so that you see a particular page each time.

 

More 

You can also watch this video to learn about scrollable containers.

You might also want to read about Proto.io's automated functionality 'Make scrollable' with which you can convert UI items or groups of items into scrollable containers.

Have more questions? Submit a request